profile
viewpoint
GU Yiling Justineo Baidu, Inc. Shanghai, China https://justineo.github.io/ I make things for the web.

ecomfe/vue-echarts 4352

ECharts component for Vue.js.

Justineo/coplay 532

Synchronizing video play between two peers.

Justineo/awesome-browser-extensions-for-github 6

A collection of awesome browser extensions for GitHub.

Justineo/esm-pkg 4

Find all dependent packages with an ESM output.

Justineo/cssgrace 3

从今天起,写简单优雅面向未来的 CSS。

Justineo/ant-design 1

🌈 A UI Design Language

Justineo/ash.css 1

A collection of HTML element and attribute style-normalizations

Justineo/awesome-vue 1

A curated list of awesome things related to Vue.js

Justineo/babel 1

:tropical_fish: Babel is a compiler for writing next generation JavaScript.

Justineo/babel-plugin-import-peer 1

Import peer dependencies for component modules with ease.

PR opened ecomfe/veui

Reviewers
Switch Table to DLS
  • 排序现在在 false, 'desc', 'asc' 之间切换
  • 新增了 bordered prop,不再在 ui 中处理,因为这个功能受是否有合并行列的情况影响,不纯粹是样式效果了
  • 支持列分组(嵌套表头),table mixin 变更为 colgroup,列注册现在是树形的
  • 支持两侧固定列
  • 顺便修复了 Toast 的进入动效
+5542 -4490

0 comment

46 changed files

pr created time in 2 hours

push eventecomfe/veui

Justineo

commit sha 5b15697a7acde2bada57c31901a8aa54abe77f14

chore: update deps and fix code style

view details

push time in 2 hours

create barnchecomfe/veui

branch : theme-dls-table

created branch time in 4 hours

issue commentvuejs/vue

Why so shitty support?

I think we have covered enough about the reason behind current issue policy here. If project members or everybody else in the community are interested in answering questions in closed issues, they are free to offer help. But I don't think your attitude is worth our help.

BTW. You are not a client. Sorry.

BonBonSlick

comment created time in 5 hours

issue closedJustineo/github-hovercard

Add ‘Follow / Unfollow’ Button on User Card

Something like this:

image

closed time in 9 hours

chanjsq

issue commentJustineo/github-hovercard

Add ‘Follow / Unfollow’ Button on User Card

It's already supported. See FAQ.

chanjsq

comment created time in 9 hours

PR closed vuejs/cn.vuejs.org

Update events.md

注释错误

<!--

首先感谢您的参与! 为了让社区工作更有效率和质量,我们做了一些约定,希望得到您的理解和支持。

首先请阅读 README[1] 了解如何参与贡献。 如果你参与的是翻译相关的工作,有劳额外移步 wiki[2] 了解相关注意事项。

谢谢!

[1] https://github.com/vuejs/cn.vuejs.org/tree/master/README.md [2] https://github.com/vuejs/cn.vuejs.org/wiki

-->

+1 -1

1 comment

1 changed file

lorva

pr closed time in 18 hours

pull request commentvuejs/cn.vuejs.org

Update events.md

谢谢,可是原文意思是对的,不需要修改。

lorva

comment created time in 18 hours

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<transition+  :name="name"+  @before-enter="beforeEnter"+  @enter="enter"+  @after-enter="afterEnter"+  @before-leave="beforeLeave"+  @leave="leave"+  @after-leave="afterLeave"+>+  <slot/>+</transition>+</template>++<script>+export default {+  name: 'veui-expand-transition',+  abstract: true,

增加一下 uiTypes: ['abstract']

xiaodemen

comment created time in 4 days

startedAkryum/guijs

started time in a day

startedvuejs/vue-router-next

started time in a day

issue closedecomfe/vue-echarts

饼状图生成canvas位置不对,强制canvas的top值无用

The type of this issue / Issue 类型

  • Bug report / Bug 报告

Not introduced by ECharts / 非 ECharts 本身问题

  • 我已检查过,这个问题非 ECharts 本身的问题。

Details / 详情

  • 具体情况参见图片(https://user-images.githubusercontent.com/12137715/71977103-ee9a0600-3252-11ea-9a1d-03889d9acc72.png) 我试着强制canvas的top值但没用,缺失的部分一直无法渲染

How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的?

  • import ECharts from 'vue-echarts';

The version of Vue-ECharts you are using / Vue-ECharts 的版本

  • ^4.1.0

Reproduction link / 复现链接

  • 问题截图 (https://user-images.githubusercontent.com/12137715/72032021-2f346680-32c9-11ea-8009-be169d35a3cb.png)

  • 代码如下

<template>
    <figure>
        <v-chart :options="options" :autoresize="true" style="margin: 0 auto;"/>
    </figure>
</template>
<style lang='scss'>
canvas {
    top: 50px!important;
    vertical-align: middle;
}
figure {
    display: inline-block;
    position: relative;
    margin: 2em auto;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    box-shadow: 0 0 45px rgba(0,0,0,.2);
    padding: 1.5em 2em;
    min-width: calc(40vw + 4em);
}
figure .echarts {
    width: 100%;
    min-width: 400px;
    height: 300px;
}
</style>

closed time in 2 days

FannyFanFan

issue commentvuejs/vue

Trailing whitespaces are trimmed from the end of inline <strong> element when page is being parsed by Vue

I assume you won't need Vue to parse and compile the UGC code. You can try put a v-pre directive on the wrapper element around your UGC so that Vue will skip that part.

kfirba

comment created time in 3 days

issue commentvuejs/vue

Trailing whitespaces are trimmed from the end of inline <strong> element when page is being parsed by Vue

Hi. What's your use case of using <strong>BOLD </strong>text instead of <strong>BOLD</strong> text?

kfirba

comment created time in 3 days

issue commentvuejs/vue

why my custom elements such as 'view', 'text' are not show?

Currently Vue creates known SVG elements with document.createElementNS.

aweiu

comment created time in 4 days

Pull request review commentecomfe/veui

feat: a new component Menu

 export default {     toggleCollapsed () {       this.realCollapsed = !this.realCollapsed     },-    handleItemClick ({ name }) {-      this.realActive = name-      this.$emit('activate', name)+    handleItemClick (item) {+      let { name, to, children, disabled } = item+      if (disabled) {+        return+      }++      if (to) {+        this.realActive = name+        this.$emit('activate', name)+      } else if (children && children.length) {+        this.toggleExpanded(item)+      } else {+        this.$emit('click', item)

感觉 click 应该是不管什么情况都应该触发的?

xiaodemen

comment created time in 5 days

Pull request review commentecomfe/veui

feat: a new component Menu

 export default {     toggleCollapsed () {       this.realCollapsed = !this.realCollapsed     },-    handleItemClick ({ name }) {-      this.realActive = name-      this.$emit('activate', name)+    handleItemClick (item) {+      let { name, to, children, disabled } = item+      if (disabled) {+        return+      }++      if (to) {+        this.realActive = name+        this.$emit('activate', name)+      } else if (children && children.length) {+        this.toggleExpanded(item)+      } else {+        this.$emit('click', item)+      }     },     handleSelect (name, closeMenu) {-      this.realActive = name-      this.$emit('activate', name)-      this.close()-      closeMenu && closeMenu()+      let item = find(this.realItems, item => item.name === name)+      if (item.to) {+        this.realActive = name+        this.$emit('activate', name)+        this.close()+        // closeMenu && closeMenu()

这个不需要了吗?

xiaodemen

comment created time in 5 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !link.disabled &&+                link.children &&+                link.children.length+            "+            type="button"+            :ui="uiParts.toggle"+            tabindex="-1"+            :class="$c('menu-item-toggle')"+            @click.stop="toggleExpanded(link)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <template+        slot="option-group-label"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+                @click="handleSelect(link.name, link.closeMenu)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <!-- <template+        slot="option-group-label"+        slot-scope="link"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(link),+            [$c('menu-link')]: true,+            [$c('menu-item')]: true+          }"+          v-bind="pickLinkProps(link)"+        >{{ link.label }}</veui-link>+      </template> -->+    </veui-option-group>+  </veui-overlay>+  <div+    :class="{+      [$c('menu-bottom')]: true,+      [$c('menu-bottom-collapsed')]: localCollapsed+    }"+  >+    <button+      v-if="collapsible"+      :ui="uiParts.toggle"+      :class="$c('menu-toggle')"+      @click="toggleCollapsed"+    >+      <veui-icon :name="icons.collapse"/>+    </button>+  </div>+</div>+</template>++<script>+import Vue from 'vue'+import Tree from './Tree'+import Icon from './Icon'+import Link from './Link'+import OptionGroup from './OptionGroup'+import Overlay from './Overlay'+import { get, map, endsWith, uniq, pick, isString } from 'lodash'+import ui from '../mixins/ui'+import prefix from '../mixins/prefix'+import controllable from '../mixins/controllable'+import overlay from '../mixins/overlay'+import outside from '../directives/outside'+import 'veui-theme-one-icons/chevron-right'++const ensureSlash = str => (endsWith(str, '/') ? str : `${str}/`)++export default {+  name: 'veui-menu',+  components: {+    'veui-tree': Tree,+    'veui-link': Link,+    'veui-icon': Icon,+    'veui-option-group': OptionGroup,+    'veui-overlay': Overlay+  },+  uiTypes: ['select'],+  directives: { outside },+  mixins: [+    prefix,+    ui,+    overlay,+    controllable({+      active: 'active',+      collapsed: {+        get () {+          return this.collapsible ? this.getReal({ prop: 'collapsed' }) : false+        }+      }+    })+  ],+  props: {+    active: {+      type: String+    },+    matches: {+      type: Function+    },+    collapsible: {+      type: Boolean+    },+    collapsed: Boolean,+    items: Tree.props.datasource,+    expanded: Tree.props.datasource+  },+  data () {+    return {+      localExpanded: [],+      localOverlayOptions: {+        position: 'right-start'+      },+      refTarget: null,+      open: false,+      currentOptions: null,+      outsideRefs: ['tree'],+      // FIXME+      flag: false+    }+  },+  computed: {+    hasIcon () {+      return !!get(this.items, '0.icon')

this.items.some(...)?

xiaodemen

comment created time in 6 days

Pull request review commentecomfe/veui

feat: a new component Menu

 const OptionGroup = {                   this.$scopedSlots.label ||                   (group => group.label),               option: this.$scopedSlots.option || null,-              'option-label': this.$scopedSlots['option-label'] || null+              'option-label': this.$scopedSlots['option-label'] || null,+              'option-group-label': this.$scopedSlots['option-group-label']+                ? () =>+                  this.$scopedSlots['option-group-label']({+                    ...option,+                    closeMenu: () => this.closeMenu(`group-${i}`)

OptionGroup 里面没有 menu 这个概念吧

xiaodemen

comment created time in 6 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !link.disabled &&+                link.children &&+                link.children.length+            "+            type="button"+            :ui="uiParts.toggle"+            tabindex="-1"+            :class="$c('menu-item-toggle')"+            @click.stop="toggleExpanded(link)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <template+        slot="option-group-label"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+                @click="handleSelect(link.name, link.closeMenu)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <!-- <template+        slot="option-group-label"+        slot-scope="link"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(link),+            [$c('menu-link')]: true,+            [$c('menu-item')]: true+          }"+          v-bind="pickLinkProps(link)"+        >{{ link.label }}</veui-link>+      </template> -->+    </veui-option-group>+  </veui-overlay>+  <div+    :class="{+      [$c('menu-bottom')]: true,+      [$c('menu-bottom-collapsed')]: localCollapsed+    }"+  >+    <button+      v-if="collapsible"+      :ui="uiParts.toggle"+      :class="$c('menu-toggle')"+      @click="toggleCollapsed"+    >+      <veui-icon :name="icons.collapse"/>+    </button>+  </div>+</div>+</template>++<script>+import Vue from 'vue'+import Tree from './Tree'+import Icon from './Icon'+import Link from './Link'+import OptionGroup from './OptionGroup'+import Overlay from './Overlay'+import { get, map, endsWith, uniq, pick, isString } from 'lodash'+import ui from '../mixins/ui'+import prefix from '../mixins/prefix'+import controllable from '../mixins/controllable'+import overlay from '../mixins/overlay'+import outside from '../directives/outside'+import 'veui-theme-one-icons/chevron-right'++const ensureSlash = str => (endsWith(str, '/') ? str : `${str}/`)++export default {+  name: 'veui-menu',+  components: {+    'veui-tree': Tree,+    'veui-link': Link,+    'veui-icon': Icon,+    'veui-option-group': OptionGroup,+    'veui-overlay': Overlay+  },+  uiTypes: ['select'],+  directives: { outside },+  mixins: [+    prefix,+    ui,+    overlay,+    controllable({+      active: 'active',+      collapsed: {+        get () {+          return this.collapsible ? this.getReal({ prop: 'collapsed' }) : false+        }+      }+    })+  ],+  props: {+    active: {+      type: String+    },+    matches: {+      type: Function+    },+    collapsible: {+      type: Boolean+    },+    collapsed: Boolean,+    items: Tree.props.datasource,+    expanded: Tree.props.datasource+  },+  data () {+    return {+      localExpanded: [],+      localOverlayOptions: {+        position: 'right-start'+      },+      refTarget: null,+      open: false,+      currentOptions: null,+      outsideRefs: ['tree'],+      // FIXME+      flag: false

看不出什么意思

xiaodemen

comment created time in 6 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !link.disabled &&+                link.children &&+                link.children.length+            "+            type="button"+            :ui="uiParts.toggle"+            tabindex="-1"+            :class="$c('menu-item-toggle')"+            @click.stop="toggleExpanded(link)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <template+        slot="option-group-label"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+                @click="handleSelect(link.name, link.closeMenu)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <!-- <template+        slot="option-group-label"+        slot-scope="link"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(link),+            [$c('menu-link')]: true,+            [$c('menu-item')]: true+          }"+          v-bind="pickLinkProps(link)"+        >{{ link.label }}</veui-link>+      </template> -->+    </veui-option-group>+  </veui-overlay>+  <div+    :class="{+      [$c('menu-bottom')]: true,+      [$c('menu-bottom-collapsed')]: localCollapsed

用 menu-footer 吧

xiaodemen

comment created time in 6 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !link.disabled &&+                link.children &&+                link.children.length+            "+            type="button"+            :ui="uiParts.toggle"+            tabindex="-1"+            :class="$c('menu-item-toggle')"+            @click.stop="toggleExpanded(link)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <template+        slot="option-group-label"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"+                :class="$c('menu-link')"+                v-bind="pickLinkProps(link)"+                @click="handleSelect(link.name, link.closeMenu)"+              >+                <span :class="$c('menu-item-label')">{{ link.label }}</span>+              </veui-link>+            </slot>+          </div>+        </slot>+      </template>+      <!-- <template+        slot="option-group-label"+        slot-scope="link"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(link),+            [$c('menu-link')]: true,+            [$c('menu-item')]: true+          }"+          v-bind="pickLinkProps(link)"+        >{{ link.label }}</veui-link>+      </template> -->

这个注释了?

xiaodemen

comment created time in 6 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"

1?

xiaodemen

comment created time in 7 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !link.disabled &&+                link.children &&+                link.children.length+            "+            type="button"+            :ui="uiParts.toggle"+            tabindex="-1"+            :class="$c('menu-item-toggle')"+            @click.stop="toggleExpanded(link)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="link"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <div+            :class="{+              [$c('menu-item')]: true,+              ...itemClass(link)+            }"+          >+            <slot+              name="item-label"+              v-bind="link"+            >+              <veui-link+                :ui="realUi"

同上

xiaodemen

comment created time in 6 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"

这个感觉不需要?size 应该会继承

xiaodemen

comment created time in 7 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !link.disabled &&+                link.children &&+                link.children.length+            "+            type="button"

veui-button 的话这个就是默认的了

xiaodemen

comment created time in 7 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="{+      [$c('menu-tree')]: true,+      [$c('menu-tree-has-icon')]: hasIcon+    }"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="link"+    >+      <div+        :ref="`item-${link.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(link)+        }"+        tabindex="1"+        @mouseenter="show(link)"+      >+        <slot+          name="item"+          v-bind="link"+        >+          <veui-icon+            v-if="link.icon"+            :class="$c('menu-item-icon')"+            :name="link.icon"+          />+          <slot+            name="item-label"+            v-bind="link"+          >+            <veui-link+              :ui="realUi"+              :class="{+                [$c('menu-link')]: true+              }"+              :disabled="!!link.disabled"+              v-bind="pickLinkProps(link)"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-label')"+              >{{+                link.label+              }}</span>+            </veui-link>+          </slot>+          <button

应该是 veui-button 吧

xiaodemen

comment created time in 7 days

issue commentJustineo/coplay

0.60版的firefox插件未打包option文件

Chrome Webstore 给我的理由是:

Your item did not comply with the following section of our policy: Do not use irrelevant, misleading, or excessive keywords in app descriptions, titles, or metadata.

而我的描述内容是:

Coplay connects two remote browsers with WebRTC (using PeerJS) and enables users from either side control video play on both sides. Coplay now works on Youku, Sohu TV, Tencent Video, Tudou, iQiyi, YouTube, ACFun, bilibili, Vimeo and MGTV.

我回复审核邮件询问理由以后,得到了一个回复,把前一个回复给我复读了一遍……

niu541412

comment created time in 7 days

PR closed vuejs/cn.vuejs.org

Reviewers
Update syntax.md

<!--

首先感谢您的参与! 为了让社区工作更有效率和质量,我们做了一些约定,希望得到您的理解和支持。

首先请阅读 README[1] 了解如何参与贡献。 如果你参与的是翻译相关的工作,有劳额外移步 wiki[2] 了解相关注意事项。

谢谢!

[1] https://github.com/vuejs/cn.vuejs.org/tree/master/README.md [2] https://github.com/vuejs/cn.vuejs.org/wiki

-->

+14 -0

1 comment

1 changed file

Killea

pr closed time in 9 days

pull request commentvuejs/cn.vuejs.org

Update syntax.md

谢谢,本项目仅同步英文版的改动。(同时这样的用法并不是我们推荐的使用方法。)

Killea

comment created time in 9 days

push eventvuejs/rfcs

GU Yiling

commit sha 80ab5b6b6670df59b8f2f0dc6af47796c0f15bff

fix: add false coercion in comparison table

view details

push time in 9 days

issue commentjson-schema-faker/json-schema-faker

Change Order so that custom generate to be superior than enum

I think custom generators are closer to users actual needs. enum shouldn't ignore the result of generators.

Jeffersondyj

comment created time in 9 days

issue openedecomfe/veui

支持指令式调用 toast/alert 等功能时传入 render function

预期用法:

import { Link } from 'veui'

export default {
  // ...
  methods: {
    handleTimeout () {
      const h = this.$createElement
      this.$toast.error([
        '登录超时,请',
        h(Link, { to: '/login' }, '重新登录')
      ])
    }
  }
}

created time in 10 days

issue commentecomfe/veui

Dialog modal启用时也要禁止滚动页面

body scroll lock 将在下个版本中发布。

599316527

comment created time in 10 days

startedJinjiang/zh-lint

started time in 11 days

issue closedJustineo/coplay

0.60版的firefox插件未打包option文件

这里的代码和firefox扩展网站的版本相比于chrome版缺失了 options.html和options.js。 导致使用时无法打开设置页面。 firefox还多了个data文件夹。似乎是无用的。 chrome商店似乎未上架新版,不知是不是审核时效的问题

closed time in 11 days

niu541412

issue commentJustineo/coplay

0.60版的firefox插件未打包option文件

选项是故意去掉的,感觉没有太大的必要了。data 文件夹应该是多余的,后面版本删掉。

Chrome 版审核被拒了,我还没搞明白是什么原因……

niu541412

comment created time in 11 days

push eventJustineo/vscode-dls

Justineo

commit sha a83dec54a684d0d81e61a6753715d4a7d9999793

chore: update deps

view details

push time in 12 days

push eventJustineo/vscode-dls

Justineo

commit sha 4054e84081ee4729cbbb1b29cc314502315fc667

0.32.1

view details

Justineo

commit sha 6039718027d8454416441ab32d4fa3644b3a410e

0.32.2

view details

push time in 12 days

pull request commentecomfe/veui

feat: a new component Menu

我的意思是 mixin 还是叫 controllable,只是 factory 方法叫 makeControllable

xiaodemen

comment created time in 12 days

issue closedJustineo/coplay

无法得到peerID

closed time in 13 days

root-wkt

issue commentJustineo/coplay

无法得到peerID

默认启用了自带的 HTTPS 服务器,如果仍然无法获取 peer ID,那我也无能为力了。

root-wkt

comment created time in 13 days

issue closedJustineo/coplay

Coplay is now not working on Bilibili

Try this on bilibili, and find it can not work out. However, I still think it's a very excellent project!! Hope you can update it sooner or later!!

closed time in 13 days

Elon-Wang

issue commentJustineo/coplay

Coplay is now not working on Bilibili

Fixed in v0.6.0.

Elon-Wang

comment created time in 13 days

issue closedJustineo/coplay

Plugin not support Firefox Quantum

Plugin currently not support Quantum version, is there a update of firefox version plugin?

closed time in 13 days

JGChicken

issue commentJustineo/coplay

Plugin not support Firefox Quantum

Fixed in v0.6.0.

JGChicken

comment created time in 13 days

issue closedJustineo/coplay

coplay is not wokring currently on Youku

the control bar does not show when click on the extension fyi

closed time in 13 days

LeoJY

issue commentJustineo/coplay

coplay is not wokring currently on Youku

Fixed in v0.6.0.

LeoJY

comment created time in 13 days

issue closedJustineo/coplay

"restart" button not working in Sohu

Hi there! It seems that the "restart" button won't synchronize between two peers.

closed time in 13 days

ShijieVVu

issue commentJustineo/coplay

"restart" button not working in Sohu

Should be fixed in v0.6.0.

ShijieVVu

comment created time in 13 days

PR closed Justineo/coplay

update for youku and iqiyi

update for youku and iqiyi

+13 -28

2 comments

1 changed file

niu541412

pr closed time in 13 days

pull request commentJustineo/coplay

update for youku and iqiyi

Fixed in v0.6.0 with different implementation. Thanks for your contribution!

niu541412

comment created time in 13 days

PR closed Justineo/coplay

Added support for HTML5 player on Mgtv.

Fixed support for HTML5 player on Youku(Only Chrome); Added support for HTML5 player on Mgtv(Only Chrome).

+133 -17

2 comments

5 changed files

leidenglai

pr closed time in 13 days

pull request commentJustineo/coplay

Added support for HTML5 player on Mgtv.

Fixed in v0.6.0 with different implementation. Thanks for your contribution!

leidenglai

comment created time in 13 days

issue closedJustineo/coplay

Update vendor support

Fix support

  • [x] Youku
  • [x] Tudou
  • [x] Tencent Video
  • [x] iQiyi
  • [x] Sohu
  • [x] YouTube
  • [x] ACFun
  • [x] bilibili
  • [x] Vimeo

Add support

  • [x] MGTV

Drop support

  • [x] Le

closed time in 13 days

Justineo

issue commentJustineo/coplay

Update vendor support

Published v0.6.0.

Justineo

comment created time in 13 days

push eventJustineo/coplay

Justineo

commit sha 5a7ab5eaa11fc81e0d61c55f1b587b217c7156b8

feat: add mgtv support, fix all vendor support

view details

push time in 13 days

issue commentecomfe/veui

Dialog modal启用时也要禁止滚动页面

两个方案:

  1. 打开 modal 的浮层时,将 document.bodyoverflow 设置为 hidden。但是这样会导致有/无滚动条时页面内容发生抖动,有几率影响整体布局(比如本来不折行的折行了)。
  2. 监听遮罩层本身的 mousewheel 事件,并且 preventDefault 处理,可以屏蔽但无法处理用户直接点击/拖动滚动条。

需要再考虑一下有没有更好的方案,或者采取其中一种做临时处理。

599316527

comment created time in 13 days

issue commentvuejs/vue

Error when return html character to japanese

Just use the original text in JavaScript. Or you have to use <h2 v-html="data"></h2>, which might introduce security risks.

gemtcn

comment created time in 13 days

issue closedecomfe/vue-echarts

graphic config 没有得到支持

The type of this issue / Issue 类型

  • [x] Bug report / Bug 报告

Not introduced by ECharts / 非 ECharts 本身问题

Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。

  • [ ] I've checked it's not a problem of ECharts itself. / 我已检查过,这个问题非 ECharts 本身的问题。

Details / 详情

How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的?

  • [ ] Bundled version/打包版本 (import ECharts from 'vue-echarts/dist/vue-echarts')
  • [x] The .vue component/.vue 组件 (import ECharts from 'vue-echarts')

The version of Vue-ECharts you are using / Vue-ECharts 的版本

Reproduction link / 复现链接

graphic 配置页面

For bug reports, please provide the steps to reproduce and if possible a minimal demo of the problem. Please paste the link to your CodeSandbox demo below:

对于 Bug 报告,请在下面提供复现的步骤,最好是最小化的能够重现问题的 demo。请在下方贴入在 CodeSandbox 上 demo 的链接:

closed time in 13 days

BennieMeng

issue commentecomfe/vue-echarts

graphic config 没有得到支持

import "echarts/lib/component/graphic";
BennieMeng

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);+    &::before {+      content: "";+      .absolute(_, 0, _, 0);+      height: inherit;+      background-color: @dls-menu-item-background-color;+    }++    &-label {+      height: inherit;+      &::before {+        content: "";+        .absolute(_, 0, _, 0);+        height: inherit;+      }+    }++    &:hover::before {+      background-color: @dls-menu-item-background-color-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-active;+    }++    &-text,+    &-icon {+      position: relative;+      z-index: 1;+    }++    &-icon {+      margin-right: 12px; // TODO 缺少个 3p 的变量?+      .dls-icon-size(@dls-menu-item-icon-size);+    }+  }++  &-tree {+    position: relative;+    padding: @dls-menu-padding-y @dls-menu-padding-x;+    .@{veui-prefix}-tree-item {+      margin-bottom: @dls-menu-item-spacing;+      height: @dls-menu-item-height-m;+      // FIXME:Tree 的 before 先干掉,active 等状态放不上+      &::before {+        display: none;+      }+    }+    & > li:last-child > .@{veui-prefix}-tree-item {+      margin-bottom: 0;+    }+    ul {+      padding-left: @dls-menu-level-indent;+    }+    // FIXME,+    & > li > ul {+      padding-left: dls-sum(@dls-menu-level-indent, 1em);+    }+  }+  &-tree &-item {+    display: flex;+    flex: 1;+    align-items: center;+    outline: none;+    max-width: 100%;+  }+  &-tree &-link {+    flex: 1;+    display: flex;+    overflow: hidden;+    &:first-child {+      margin-left: 0;+    }+  }+  &-link &-item-text {+    white-space: nowrap;+    overflow: hidden;+    text-overflow: ellipsis;+  }++  // exact-active+  &-overlay &-item-exact-active:not(.@{veui-prefix}-disabled),+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-icon,+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-label {+    color: @dls-menu-item-font-color-current-active;+    font-weight: @dls-menu-item-font-weight-current;+  }+  &-item-exact-active:not(.@{veui-prefix}-disabled) {+    &::before {+      background-color: @dls-menu-item-background-color-current;+    }+    &:hover::before {+      background-color: @dls-menu-item-background-color-current-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-current-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-current-active;+    }++    // Indicators+    .@{veui-prefix}-menu-tree & {+      &::after {+        content: "";+        .absolute(_, -1px, _, _);+        .size(@dls-menu-indicator-width, inherit);+        background: @dls-menu-indicator-color;+      }+      &:hover::after {+        background-color: @dls-menu-indicator-color-hover;+      }+      &.focus-visible::after {+        background-color: @dls-menu-indicator-color-focus;+      }+      &:active::after {+        background-color: @dls-menu-indicator-color-active;+      }+    }+  }++  &-item.@{veui-prefix}-disabled &-item-icon,+  &-item.@{veui-prefix}-disabled &-item-label {+    color: @dls-menu-item-font-color-disabled;+  }++  &-item-expand-switcher {+    margin-left: 12px; // TODO+    position: relative;+    transform: rotateZ(90deg);+  }+  .@{veui-prefix}-tree-item-expanded &-item-expand-switcher {+    transform: rotateZ(-90deg);+  }++  &-item-expand-switcher,+  &-bottom-collapse-switcher {+    background: none;+    border: none;+    padding: 0;+    outline: none;+    cursor: pointer;+    line-height: 1;+    color: @dls-icon-color-aux;+    .@{veui-prefix}-icon {+      vertical-align: top;+    }+  }++  // Bottom+  &-bottom {+    border-top: 1px solid @dls-menu-separator-color;+    display: flex;+    flex-direction: row-reverse;+    align-items: center;+    height: @dls-menu-footer-height-m;+    padding-right: @dls-menu-padding-x;++    &-collapse-switcher {+      transform: rotateZ(180deg);+    }+  }+  &-collapsed &-bottom-collapse-switcher {+    transform: rotateZ(0);+  }++  &-collapsed &-tree {+    padding: @dls-menu-padding-y 0;+  }+  &-collapsed &-item {+    justify-content: center;+  }++  // collapsed+  &-collapsed &-item-exact-active-within::before {+    background-color: @dls-menu-item-background-color-current;+  }+  &-collapsed &-tree &-link {+    flex-basis: 0;+    flex-grow: 0;+  }++  &-collapsed &-item-icon {+    margin: 0;+  }++  &-overlay {+    & > .@{veui-prefix}-option-group-options,+    & > .@{veui-prefix}-option-group {+      &:extend(._veui-dropdown-overlay all);+      margin: 0 @dls-option-dropdown-target-spacing;+    }++    .@{veui-prefix}-option {+      &,+      &-group-label {+        position: relative;+      }+    }+  }++  &-overlay &-link::after {+    content: "";+    display: block;+    .absolute(0, 0, 0, 0);+  }++  &-tree[ui~="s"],+  &-overlay[ui~="s"] {+    font-size: @dls-menu-font-size-s;+  }++  &[ui~="s"] &-tree .@{veui-prefix}-tree-item,+  &[ui~="s"] &-item {+    .centered-line(@dls-menu-item-height-s);

就设一个容器高度然后用 flex 居中吧,这里面是可以有 slot 内容的,不一定都是文字

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="$c('menu-tree')"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="props"+    >+      <div+        :ref="`item-${props.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(props)+        }"+        tabindex="1"+        @mouseenter="show(props)"+      >+        <slot+          name="item"+          v-bind="props"+        >+          <veui-icon+            v-if="props.icon"+            :class="$c('menu-item-icon')"+            :name="props.icon"+          />+          <slot+            name="item-label"+            v-bind="props"+          >+            <veui-link+              :class="{+                [$c('menu-link')]: true,+                [$c('menu-item-label')]: true+              }"+              :disabled="!!props.disabled"+              :to="props.to"+              :ui="realUi"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-text')"+              >{{+                props.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !props.disabled &&+                props.children &&+                props.children.length+            "+            type="button"+            :ui="uiParts.expand"+            tabindex="-1"+            :class="$c('menu-item-expand-switcher')"+            @click.stop="toggleExpanded(props)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="props"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(props),+            [$c('menu-link')]: true+          }"+          v-bind="getLinkProps(props)"+        >{{ props.label }}</veui-link>+      </template>+      <template+        slot="option-group-label"+        slot-scope="props"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(props),+            [$c('menu-link')]: true+          }"+          v-bind="getLinkProps(props)"+          @click="handleSelect(props.name, props.closeMenu)"+        >{{ props.label }}</veui-link>+      </template>+    </veui-option-group>+  </veui-overlay>+  <div+    :class="{+      [$c('menu-bottom')]: true,+      [$c('menu-bottom-collapsed')]: localCollapsed+    }"+  >+    <button+      v-if="collapsible"+      :ui="uiParts.collapse"+      :class="$c('menu-bottom-collapse-switcher')"+      @click="toggleCollapsed"+    >+      <veui-icon :name="icons.collapse"/>+    </button>+  </div>+</div>+</template>++<script>+import Vue from 'vue'+import Tree from './Tree'+import Icon from './Icon'+import Link from './Link'+import OptionGroup from './OptionGroup'+import Overlay from './Overlay'+import { map, endsWith, startsWith, uniq, pick, isString } from 'lodash'+import ui from '../mixins/ui'+import prefix from '../mixins/prefix'+import controllable from '../mixins/controllable'+import overlay from '../mixins/overlay'+import outside from '../directives/outside'+import 'veui-theme-one-icons/chevron-right'++const ensureSlash = str => (endsWith(str, '/') ? str : `${str}/`)++export default {+  name: 'veui-menu',+  components: {+    'veui-tree': Tree,+    'veui-link': Link,+    'veui-icon': Icon,+    'veui-option-group': OptionGroup,+    'veui-overlay': Overlay+  },+  uiTypes: ['select'],+  directives: { outside },+  mixins: [+    prefix,+    ui,+    overlay,+    controllable({+      active: 'active',+      collapsed: {+        get () {+          return this.collapsible ? this.getReal({ prop: 'collapsed' }) : false+        }+      }+    })+  ],+  props: {+    active: {+      type: String+    },+    matches: {+      type: Function+    },+    collapsible: {+      type: Boolean+    },+    collapsed: Boolean,+    items: Tree.props.datasource,+    expanded: Tree.props.datasource+  },+  data () {+    return {+      localExpanded: [],+      localOverlayOptions: {+        attachment: 'top left',+        targetAttachment: 'top right'+      },+      refTarget: null,+      open: false,+      currentOptions: null,+      outsideRefs: ['tree'],+      // FIXME+      flag: false+    }+  },+  computed: {+    transformedItems () {+      let fullPathMap = {}+      return {+        items: Vue.observable(+          this.transformItems(this.items, null, fullPathMap)+        ),+        fullPathMap+      }+    },+    itemInfo () {+      let exactActiveItem = this.markItems(this.transformedItems.items)+      return Vue.observable({+        realItems: this.transformedItems.items,+        exactActiveItem+      })+    },+    realExpanded: {+      get () {+        // 这里有点恶心了,改完 Tree 在修复吧+        return this.realCollapsed+          ? (this.flag, [])+          : 'expanded' in this.$options.propsData+            ? (this.flag, this.expanded ? [...this.expanded] : [])+            : this.localExpanded+      },+      set (_) {+        // 仅仅在 sync 中用了,直接忽略,让原来的值重新生效,即 Tree 里面点击 toggle 无效+        // FIXME 当 Tree 不再是 watch时, 暂时用 flag 让每次修改之后的原值都是不同的+        this.flag = !this.flag+        this.localExpanded = [...this.realExpanded]+        this.$emit('update:expanded', this.localExpanded)+      }+    },+    // 返回 exactActive/active+    realMatches () {+      return (+        this.matches ||+        (({ name, to }, realActive) => {+          let exactActive = name === realActive+          let active = exactActive+            ? false+            : startsWith(+              to ? ensureSlash(realActive) : realActive,+              to ? ensureSlash(name) : name+            )++          return {+            exactActive,+            active+          }+        })+      )+    }+  },+  created () {+    if (this.$router) {+      const updateActive = ({ fullPath }) => {+        let fullPathMap = this.transformedItems.fullPathMap+        this.realActive = fullPathMap[fullPath] || null+      }+      this.$watch('$route', updateActive)+      // 第一次 prop active 有值,内部就不 sync 了+      if (!('active' in this.$options.propsData)) {+        updateActive(this.$route)+      }+    }++    // 第一次需要初始 this.realActive 之后执行+    this.$watch('itemInfo', {+      handler ({ exactActiveItem }) {+        if (!this.realCollapsed && exactActiveItem && exactActiveItem.parent) {+          this.toggleExpanded(exactActiveItem.parent, true)+        }+      },+      immediate: true+    })+  },+  methods: {+    // 确保每个item都有name+    transformItems (items, parent, fullPathMap) {+      return map(items, item => {+        let { to, name, children } = item+        if (name == null && to == null) {+          throw new Error('name or to required!')+        }++        item = {+          ...item,+          exactActive: false,+          active: false,+          exactActiveWithin: false,+          parent+        }++        // fullPath 是用来跳转的+        if (to == null) {+          item.fullPath = null+        } else if (this.$router) {+          let { fullPath } = this.$router.resolve(to).route+          item.fullPath = fullPath+        } else if (isString(to)) {+          item.fullPath = to+        } else {+          throw new Error('must have router to resolve to')+        }++        if (!name) {+          item.name = item.fullPath || ''+        }+        fullPathMap[item.fullPath] = item.name+        item.value = item.value || item.name++        if (children) {+          children = this.transformItems(children, item, fullPathMap)+          item.position = 'popup'+          item.options = item.children = children+        }+        return item+      })+    },+    markItems (items) {+      let exactActiveItem = null+      items.forEach(item => {+        let { active, exactActive } = this.realMatches(item, this.realActive)+        let exactActiveWithin = false+        if (exactActive) {+          exactActiveItem = item+        }+        if (item.children) {+          let exact = this.markItems(item.children)+          if (exact) {+            exactActiveItem = exact+          }+          exactActiveWithin = item.children.some(+            ({ exactActive, exactActiveWithin }) =>+              exactActive || exactActiveWithin+          )+        }+        item.active = active+        item.exactActive = exactActive+        item.exactActiveWithin = exactActiveWithin+      })++      return exactActiveItem+    },+    itemClass (item) {+      let { active, exactActive, exactActiveWithin, disabled } = item+      return {+        [this.$c('disabled')]: disabled,+        [this.$c('menu-item-exact-active')]: exactActive,+        [this.$c('menu-item-active')]: active,+        [this.$c('menu-item-exact-active-within')]: exactActiveWithin+      }+    },+    getLinkProps (data) {
    pickLinkProps (data) {
xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="$c('menu-tree')"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="props"+    >+      <div+        :ref="`item-${props.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(props)+        }"+        tabindex="1"+        @mouseenter="show(props)"+      >+        <slot+          name="item"+          v-bind="props"+        >+          <veui-icon+            v-if="props.icon"+            :class="$c('menu-item-icon')"+            :name="props.icon"+          />+          <slot+            name="item-label"+            v-bind="props"+          >+            <veui-link+              :class="{+                [$c('menu-link')]: true,+                [$c('menu-item-label')]: true+              }"+              :disabled="!!props.disabled"+              :to="props.to"+              :ui="realUi"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-text')"+              >{{+                props.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !props.disabled &&+                props.children &&+                props.children.length+            "+            type="button"+            :ui="uiParts.expand"+            tabindex="-1"+            :class="$c('menu-item-expand-switcher')"+            @click.stop="toggleExpanded(props)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="props"
        slot-scope="link"

起一些意义明确的名字吧

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);+    &::before {+      content: "";+      .absolute(_, 0, _, 0);+      height: inherit;+      background-color: @dls-menu-item-background-color;+    }++    &-label {+      height: inherit;+      &::before {+        content: "";+        .absolute(_, 0, _, 0);+        height: inherit;+      }+    }++    &:hover::before {+      background-color: @dls-menu-item-background-color-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-active;+    }++    &-text,+    &-icon {+      position: relative;+      z-index: 1;+    }++    &-icon {+      margin-right: 12px; // TODO 缺少个 3p 的变量?+      .dls-icon-size(@dls-menu-item-icon-size);+    }+  }++  &-tree {+    position: relative;+    padding: @dls-menu-padding-y @dls-menu-padding-x;+    .@{veui-prefix}-tree-item {+      margin-bottom: @dls-menu-item-spacing;+      height: @dls-menu-item-height-m;+      // FIXME:Tree 的 before 先干掉,active 等状态放不上+      &::before {+        display: none;+      }+    }+    & > li:last-child > .@{veui-prefix}-tree-item {+      margin-bottom: 0;+    }+    ul {+      padding-left: @dls-menu-level-indent;+    }+    // FIXME,+    & > li > ul {+      padding-left: dls-sum(@dls-menu-level-indent, 1em);

这个 1em 是啥

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);+    &::before {+      content: "";+      .absolute(_, 0, _, 0);+      height: inherit;+      background-color: @dls-menu-item-background-color;+    }++    &-label {+      height: inherit;+      &::before {+        content: "";+        .absolute(_, 0, _, 0);+        height: inherit;+      }+    }++    &:hover::before {+      background-color: @dls-menu-item-background-color-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-active;+    }++    &-text,+    &-icon {+      position: relative;+      z-index: 1;+    }++    &-icon {+      margin-right: 12px; // TODO 缺少个 3p 的变量?+      .dls-icon-size(@dls-menu-item-icon-size);+    }+  }++  &-tree {+    position: relative;+    padding: @dls-menu-padding-y @dls-menu-padding-x;+    .@{veui-prefix}-tree-item {+      margin-bottom: @dls-menu-item-spacing;+      height: @dls-menu-item-height-m;+      // FIXME:Tree 的 before 先干掉,active 等状态放不上+      &::before {+        display: none;+      }+    }+    & > li:last-child > .@{veui-prefix}-tree-item {+      margin-bottom: 0;+    }+    ul {+      padding-left: @dls-menu-level-indent;+    }+    // FIXME,+    & > li > ul {+      padding-left: dls-sum(@dls-menu-level-indent, 1em);+    }+  }+  &-tree &-item {+    display: flex;+    flex: 1;+    align-items: center;+    outline: none;+    max-width: 100%;+  }+  &-tree &-link {+    flex: 1;+    display: flex;+    overflow: hidden;+    &:first-child {+      margin-left: 0;+    }+  }+  &-link &-item-text {+    white-space: nowrap;+    overflow: hidden;+    text-overflow: ellipsis;+  }++  // exact-active+  &-overlay &-item-exact-active:not(.@{veui-prefix}-disabled),+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-icon,+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-label {+    color: @dls-menu-item-font-color-current-active;+    font-weight: @dls-menu-item-font-weight-current;+  }+  &-item-exact-active:not(.@{veui-prefix}-disabled) {+    &::before {+      background-color: @dls-menu-item-background-color-current;+    }+    &:hover::before {+      background-color: @dls-menu-item-background-color-current-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-current-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-current-active;+    }++    // Indicators+    .@{veui-prefix}-menu-tree & {+      &::after {+        content: "";+        .absolute(_, -1px, _, _);+        .size(@dls-menu-indicator-width, inherit);+        background: @dls-menu-indicator-color;+      }+      &:hover::after {+        background-color: @dls-menu-indicator-color-hover;+      }+      &.focus-visible::after {+        background-color: @dls-menu-indicator-color-focus;+      }+      &:active::after {+        background-color: @dls-menu-indicator-color-active;+      }+    }+  }++  &-item.@{veui-prefix}-disabled &-item-icon,+  &-item.@{veui-prefix}-disabled &-item-label {+    color: @dls-menu-item-font-color-disabled;+  }++  &-item-expand-switcher {+    margin-left: 12px; // TODO+    position: relative;+    transform: rotateZ(90deg);+  }+  .@{veui-prefix}-tree-item-expanded &-item-expand-switcher {+    transform: rotateZ(-90deg);+  }++  &-item-expand-switcher,+  &-bottom-collapse-switcher {+    background: none;+    border: none;+    padding: 0;+    outline: none;+    cursor: pointer;+    line-height: 1;+    color: @dls-icon-color-aux;+    .@{veui-prefix}-icon {+      vertical-align: top;+    }+  }++  // Bottom+  &-bottom {+    border-top: 1px solid @dls-menu-separator-color;+    display: flex;+    flex-direction: row-reverse;

justify-content: flex-end 更对吧

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+import { capitalize, isString, isPlainObject, reduce } from 'lodash'++let options = {+  methods: {+    hasProp (name) {+      return name in this.$options.propsData+    },+    getReal ({ prop, local } = {}) {+      return this.hasProp(prop)+        ? this[prop]+        : local+          ? this[local]+          : this[`local${capitalize(prop)}`]+    },+    setReal (value, { prop, local, event } = {}) {+      // TODO forceUpdate+      // '' 则认为忽略对应的操作

必须是字符串?

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="$c('menu-tree')"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="props"+    >+      <div+        :ref="`item-${props.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(props)+        }"+        tabindex="1"+        @mouseenter="show(props)"+      >+        <slot+          name="item"+          v-bind="props"+        >+          <veui-icon+            v-if="props.icon"+            :class="$c('menu-item-icon')"+            :name="props.icon"+          />+          <slot+            name="item-label"+            v-bind="props"+          >+            <veui-link+              :class="{+                [$c('menu-link')]: true,+                [$c('menu-item-label')]: true+              }"+              :disabled="!!props.disabled"+              :to="props.to"+              :ui="realUi"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-text')"+              >{{+                props.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !props.disabled &&+                props.children &&+                props.children.length+            "+            type="button"+            :ui="uiParts.expand"+            tabindex="-1"+            :class="$c('menu-item-expand-switcher')"+            @click.stop="toggleExpanded(props)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="props"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(props),+            [$c('menu-link')]: true+          }"+          v-bind="getLinkProps(props)"+        >{{ props.label }}</veui-link>+      </template>+      <template+        slot="option-group-label"+        slot-scope="props"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(props),+            [$c('menu-link')]: true+          }"+          v-bind="getLinkProps(props)"+          @click="handleSelect(props.name, props.closeMenu)"+        >{{ props.label }}</veui-link>+      </template>+    </veui-option-group>+  </veui-overlay>+  <div+    :class="{+      [$c('menu-bottom')]: true,+      [$c('menu-bottom-collapsed')]: localCollapsed+    }"+  >+    <button+      v-if="collapsible"+      :ui="uiParts.collapse"+      :class="$c('menu-bottom-collapse-switcher')"+      @click="toggleCollapsed"+    >+      <veui-icon :name="icons.collapse"/>+    </button>+  </div>+</div>+</template>++<script>+import Vue from 'vue'+import Tree from './Tree'+import Icon from './Icon'+import Link from './Link'+import OptionGroup from './OptionGroup'+import Overlay from './Overlay'+import { map, endsWith, startsWith, uniq, pick, isString } from 'lodash'+import ui from '../mixins/ui'+import prefix from '../mixins/prefix'+import controllable from '../mixins/controllable'+import overlay from '../mixins/overlay'+import outside from '../directives/outside'+import 'veui-theme-one-icons/chevron-right'++const ensureSlash = str => (endsWith(str, '/') ? str : `${str}/`)++export default {+  name: 'veui-menu',+  components: {+    'veui-tree': Tree,+    'veui-link': Link,+    'veui-icon': Icon,+    'veui-option-group': OptionGroup,+    'veui-overlay': Overlay+  },+  uiTypes: ['select'],+  directives: { outside },+  mixins: [+    prefix,+    ui,+    overlay,+    controllable({+      active: 'active',+      collapsed: {+        get () {+          return this.collapsible ? this.getReal({ prop: 'collapsed' }) : false+        }+      }+    })+  ],+  props: {+    active: {+      type: String+    },+    matches: {+      type: Function+    },+    collapsible: {+      type: Boolean+    },+    collapsed: Boolean,+    items: Tree.props.datasource,+    expanded: Tree.props.datasource+  },+  data () {+    return {+      localExpanded: [],+      localOverlayOptions: {+        attachment: 'top left',+        targetAttachment: 'top right'+      },+      refTarget: null,+      open: false,+      currentOptions: null,+      outsideRefs: ['tree'],+      // FIXME+      flag: false+    }+  },+  computed: {+    transformedItems () {+      let fullPathMap = {}+      return {+        items: Vue.observable(+          this.transformItems(this.items, null, fullPathMap)+        ),+        fullPathMap+      }+    },+    itemInfo () {+      let exactActiveItem = this.markItems(this.transformedItems.items)+      return Vue.observable({+        realItems: this.transformedItems.items,+        exactActiveItem+      })+    },+    realExpanded: {+      get () {+        // 这里有点恶心了,改完 Tree 在修复吧+        return this.realCollapsed+          ? (this.flag, [])+          : 'expanded' in this.$options.propsData+            ? (this.flag, this.expanded ? [...this.expanded] : [])+            : this.localExpanded+      },+      set (_) {+        // 仅仅在 sync 中用了,直接忽略,让原来的值重新生效,即 Tree 里面点击 toggle 无效+        // FIXME 当 Tree 不再是 watch时, 暂时用 flag 让每次修改之后的原值都是不同的+        this.flag = !this.flag+        this.localExpanded = [...this.realExpanded]+        this.$emit('update:expanded', this.localExpanded)+      }+    },+    // 返回 exactActive/active+    realMatches () {+      return (+        this.matches ||+        (({ name, to }, realActive) => {+          let exactActive = name === realActive+          let active = exactActive+            ? false+            : startsWith(+              to ? ensureSlash(realActive) : realActive,+              to ? ensureSlash(name) : name+            )++          return {+            exactActive,+            active+          }+        })+      )+    }+  },+  created () {+    if (this.$router) {+      const updateActive = ({ fullPath }) => {+        let fullPathMap = this.transformedItems.fullPathMap+        this.realActive = fullPathMap[fullPath] || null+      }+      this.$watch('$route', updateActive)+      // 第一次 prop active 有值,内部就不 sync 了+      if (!('active' in this.$options.propsData)) {+        updateActive(this.$route)+      }+    }++    // 第一次需要初始 this.realActive 之后执行+    this.$watch('itemInfo', {+      handler ({ exactActiveItem }) {+        if (!this.realCollapsed && exactActiveItem && exactActiveItem.parent) {+          this.toggleExpanded(exactActiveItem.parent, true)+        }+      },+      immediate: true+    })+  },+  methods: {+    // 确保每个item都有name+    transformItems (items, parent, fullPathMap) {+      return map(items, item => {+        let { to, name, children } = item+        if (name == null && to == null) {+          throw new Error('name or to required!')+        }++        item = {+          ...item,+          exactActive: false,+          active: false,+          exactActiveWithin: false,+          parent+        }++        // fullPath 是用来跳转的+        if (to == null) {+          item.fullPath = null+        } else if (this.$router) {+          let { fullPath } = this.$router.resolve(to).route+          item.fullPath = fullPath+        } else if (isString(to)) {+          item.fullPath = to+        } else {+          throw new Error('must have router to resolve to')
          throw new Error('[veui-menu] Non-string `to` cannot be resolved without Vue Router.')
xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+import { capitalize, isString, isPlainObject, reduce } from 'lodash'++let options = {+  methods: {+    hasProp (name) {+      return name in this.$options.propsData+    },+    getReal ({ prop, local } = {}) {+      return this.hasProp(prop)+        ? this[prop]+        : local+          ? this[local]+          : this[`local${capitalize(prop)}`]+    },+    setReal (value, { prop, local, event } = {}) {+      // TODO forceUpdate+      // '' 则认为忽略对应的操作+      if (local !== '') {+        local = local || `local${capitalize(prop)}`+        this[local] = value+      }+      if (event !== '') {+        event = event || `update:${prop}`+        this.$emit(event, value)+      }+    }+  }+}++export default function factory (props) {

名字太抽象了,makeControllable?

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);+    &::before {+      content: "";+      .absolute(_, 0, _, 0);+      height: inherit;+      background-color: @dls-menu-item-background-color;+    }++    &-label {+      height: inherit;+      &::before {+        content: "";+        .absolute(_, 0, _, 0);+        height: inherit;+      }+    }++    &:hover::before {+      background-color: @dls-menu-item-background-color-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-active;+    }++    &-text,+    &-icon {+      position: relative;+      z-index: 1;+    }++    &-icon {+      margin-right: 12px; // TODO 缺少个 3p 的变量?+      .dls-icon-size(@dls-menu-item-icon-size);+    }+  }++  &-tree {+    position: relative;+    padding: @dls-menu-padding-y @dls-menu-padding-x;+    .@{veui-prefix}-tree-item {+      margin-bottom: @dls-menu-item-spacing;+      height: @dls-menu-item-height-m;+      // FIXME:Tree 的 before 先干掉,active 等状态放不上+      &::before {+        display: none;+      }+    }+    & > li:last-child > .@{veui-prefix}-tree-item {+      margin-bottom: 0;+    }+    ul {+      padding-left: @dls-menu-level-indent;+    }+    // FIXME,+    & > li > ul {+      padding-left: dls-sum(@dls-menu-level-indent, 1em);+    }+  }+  &-tree &-item {+    display: flex;+    flex: 1;+    align-items: center;+    outline: none;+    max-width: 100%;+  }+  &-tree &-link {+    flex: 1;+    display: flex;+    overflow: hidden;+    &:first-child {+      margin-left: 0;+    }+  }+  &-link &-item-text {+    white-space: nowrap;+    overflow: hidden;+    text-overflow: ellipsis;+  }++  // exact-active+  &-overlay &-item-exact-active:not(.@{veui-prefix}-disabled),+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-icon,+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-label {+    color: @dls-menu-item-font-color-current-active;+    font-weight: @dls-menu-item-font-weight-current;+  }+  &-item-exact-active:not(.@{veui-prefix}-disabled) {+    &::before {+      background-color: @dls-menu-item-background-color-current;+    }+    &:hover::before {+      background-color: @dls-menu-item-background-color-current-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-current-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-current-active;+    }++    // Indicators+    .@{veui-prefix}-menu-tree & {+      &::after {+        content: "";+        .absolute(_, -1px, _, _);+        .size(@dls-menu-indicator-width, inherit);+        background: @dls-menu-indicator-color;+      }+      &:hover::after {+        background-color: @dls-menu-indicator-color-hover;+      }+      &.focus-visible::after {+        background-color: @dls-menu-indicator-color-focus;+      }+      &:active::after {+        background-color: @dls-menu-indicator-color-active;+      }+    }+  }++  &-item.@{veui-prefix}-disabled &-item-icon,+  &-item.@{veui-prefix}-disabled &-item-label {+    color: @dls-menu-item-font-color-disabled;+  }++  &-item-expand-switcher {+    margin-left: 12px; // TODO+    position: relative;+    transform: rotateZ(90deg);+  }+  .@{veui-prefix}-tree-item-expanded &-item-expand-switcher {+    transform: rotateZ(-90deg);+  }++  &-item-expand-switcher,+  &-bottom-collapse-switcher {+    background: none;+    border: none;+    padding: 0;+    outline: none;+    cursor: pointer;+    line-height: 1;+    color: @dls-icon-color-aux;+    .@{veui-prefix}-icon {+      vertical-align: top;+    }+  }++  // Bottom+  &-bottom {+    border-top: 1px solid @dls-menu-separator-color;+    display: flex;+    flex-direction: row-reverse;+    align-items: center;+    height: @dls-menu-footer-height-m;+    padding-right: @dls-menu-padding-x;++    &-collapse-switcher {+      transform: rotateZ(180deg);+    }+  }+  &-collapsed &-bottom-collapse-switcher {+    transform: rotateZ(0);+  }++  &-collapsed &-tree {+    padding: @dls-menu-padding-y 0;+  }+  &-collapsed &-item {+    justify-content: center;+  }++  // collapsed+  &-collapsed &-item-exact-active-within::before {+    background-color: @dls-menu-item-background-color-current;+  }+  &-collapsed &-tree &-link {+    flex-basis: 0;+    flex-grow: 0;+  }++  &-collapsed &-item-icon {+    margin: 0;+  }++  &-overlay {+    & > .@{veui-prefix}-option-group-options,+    & > .@{veui-prefix}-option-group {+      &:extend(._veui-dropdown-overlay all);+      margin: 0 @dls-option-dropdown-target-spacing;+    }++    .@{veui-prefix}-option {+      &,+      &-group-label {+        position: relative;+      }+    }+  }++  &-overlay &-link::after {+    content: "";+    display: block;+    .absolute(0, 0, 0, 0);
    .absolute(0);

这个 mixin 规则和带方向的 shorthand property 是一样的

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+import { capitalize, isString, isPlainObject, reduce } from 'lodash'++let options = {

这个 mixin 的逻辑在 PR 里面写一下吧

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+<template>+<div+  :class="{+    [$c('menu')]: true,+    [$c('menu-collapsed')]: realCollapsed+  }"+  :ui="realUi"+>+  <veui-tree+    ref="tree"+    :class="$c('menu-tree')"+    :datasource="itemInfo.realItems"+    :expanded.sync="realExpanded"+    keys="name"+    @click="handleItemClick"+  >+    <template+      slot="item"+      slot-scope="props"+    >+      <div+        :ref="`item-${props.name}`"+        :class="{+          [$c('menu-item')]: true,+          ...itemClass(props)+        }"+        tabindex="1"+        @mouseenter="show(props)"+      >+        <slot+          name="item"+          v-bind="props"+        >+          <veui-icon+            v-if="props.icon"+            :class="$c('menu-item-icon')"+            :name="props.icon"+          />+          <slot+            name="item-label"+            v-bind="props"+          >+            <veui-link+              :class="{+                [$c('menu-link')]: true,+                [$c('menu-item-label')]: true+              }"+              :disabled="!!props.disabled"+              :to="props.to"+              :ui="realUi"+            >+              <span+                v-if="!realCollapsed"+                :class="$c('menu-item-text')"+              >{{+                props.label+              }}</span>+            </veui-link>+          </slot>+          <button+            v-if="+              !realCollapsed &&+                !props.disabled &&+                props.children &&+                props.children.length+            "+            type="button"+            :ui="uiParts.expand"+            tabindex="-1"+            :class="$c('menu-item-expand-switcher')"+            @click.stop="toggleExpanded(props)"+          >+            <veui-icon :name="icons.expand"/>+          </button>+        </slot>+      </div>+    </template>+  </veui-tree>+  <veui-overlay+    v-if="realCollapsed"+    :target="refTarget"+    :open.sync="open"+    :options="realOverlayOptions"+    position="right-start"+    :overlay-class="$c('menu-overlay')"+    trigger="hover"+  >+    <veui-option-group+      v-outside="{+        refs: outsideRefs,+        delay: 100,+        trigger: 'hover',+        handler: close+      }"+      :overlay-class="$c('menu-overlay')"+      :options="currentOptions"+      position="popup"+      trigger="hover"+      option-tag="div"+    >+      <template+        slot="option"+        slot-scope="props"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(props),+            [$c('menu-link')]: true+          }"+          v-bind="getLinkProps(props)"+        >{{ props.label }}</veui-link>+      </template>+      <template+        slot="option-group-label"+        slot-scope="props"+      >+        <veui-link+          :ui="realUi"+          :class="{+            ...itemClass(props),+            [$c('menu-link')]: true+          }"+          v-bind="getLinkProps(props)"+          @click="handleSelect(props.name, props.closeMenu)"+        >{{ props.label }}</veui-link>+      </template>+    </veui-option-group>+  </veui-overlay>+  <div+    :class="{+      [$c('menu-bottom')]: true,+      [$c('menu-bottom-collapsed')]: localCollapsed+    }"+  >+    <button+      v-if="collapsible"+      :ui="uiParts.collapse"+      :class="$c('menu-bottom-collapse-switcher')"+      @click="toggleCollapsed"+    >+      <veui-icon :name="icons.collapse"/>+    </button>+  </div>+</div>+</template>++<script>+import Vue from 'vue'+import Tree from './Tree'+import Icon from './Icon'+import Link from './Link'+import OptionGroup from './OptionGroup'+import Overlay from './Overlay'+import { map, endsWith, startsWith, uniq, pick, isString } from 'lodash'+import ui from '../mixins/ui'+import prefix from '../mixins/prefix'+import controllable from '../mixins/controllable'+import overlay from '../mixins/overlay'+import outside from '../directives/outside'+import 'veui-theme-one-icons/chevron-right'++const ensureSlash = str => (endsWith(str, '/') ? str : `${str}/`)++export default {+  name: 'veui-menu',+  components: {+    'veui-tree': Tree,+    'veui-link': Link,+    'veui-icon': Icon,+    'veui-option-group': OptionGroup,+    'veui-overlay': Overlay+  },+  uiTypes: ['select'],+  directives: { outside },+  mixins: [+    prefix,+    ui,+    overlay,+    controllable({+      active: 'active',+      collapsed: {+        get () {+          return this.collapsible ? this.getReal({ prop: 'collapsed' }) : false+        }+      }+    })+  ],+  props: {+    active: {+      type: String+    },+    matches: {+      type: Function+    },+    collapsible: {+      type: Boolean+    },+    collapsed: Boolean,+    items: Tree.props.datasource,+    expanded: Tree.props.datasource+  },+  data () {+    return {+      localExpanded: [],+      localOverlayOptions: {+        attachment: 'top left',+        targetAttachment: 'top right'+      },+      refTarget: null,+      open: false,+      currentOptions: null,+      outsideRefs: ['tree'],+      // FIXME+      flag: false+    }+  },+  computed: {+    transformedItems () {+      let fullPathMap = {}+      return {+        items: Vue.observable(+          this.transformItems(this.items, null, fullPathMap)+        ),+        fullPathMap+      }+    },+    itemInfo () {+      let exactActiveItem = this.markItems(this.transformedItems.items)+      return Vue.observable({+        realItems: this.transformedItems.items,+        exactActiveItem+      })

为啥要用 observable...

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);

用 flex 吧

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);+    &::before {+      content: "";+      .absolute(_, 0, _, 0);+      height: inherit;+      background-color: @dls-menu-item-background-color;+    }++    &-label {+      height: inherit;+      &::before {+        content: "";+        .absolute(_, 0, _, 0);+        height: inherit;+      }+    }++    &:hover::before {+      background-color: @dls-menu-item-background-color-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-active;+    }++    &-text,+    &-icon {+      position: relative;+      z-index: 1;+    }++    &-icon {+      margin-right: 12px; // TODO 缺少个 3p 的变量?+      .dls-icon-size(@dls-menu-item-icon-size);+    }+  }++  &-tree {+    position: relative;+    padding: @dls-menu-padding-y @dls-menu-padding-x;+    .@{veui-prefix}-tree-item {+      margin-bottom: @dls-menu-item-spacing;+      height: @dls-menu-item-height-m;+      // FIXME:Tree 的 before 先干掉,active 等状态放不上+      &::before {+        display: none;+      }+    }+    & > li:last-child > .@{veui-prefix}-tree-item {+      margin-bottom: 0;+    }+    ul {+      padding-left: @dls-menu-level-indent;+    }+    // FIXME,+    & > li > ul {+      padding-left: dls-sum(@dls-menu-level-indent, 1em);+    }+  }+  &-tree &-item {+    display: flex;+    flex: 1;+    align-items: center;+    outline: none;+    max-width: 100%;+  }+  &-tree &-link {+    flex: 1;+    display: flex;+    overflow: hidden;+    &:first-child {+      margin-left: 0;+    }+  }+  &-link &-item-text {+    white-space: nowrap;+    overflow: hidden;+    text-overflow: ellipsis;+  }++  // exact-active+  &-overlay &-item-exact-active:not(.@{veui-prefix}-disabled),+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-icon,+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-label {+    color: @dls-menu-item-font-color-current-active;+    font-weight: @dls-menu-item-font-weight-current;+  }+  &-item-exact-active:not(.@{veui-prefix}-disabled) {+    &::before {+      background-color: @dls-menu-item-background-color-current;+    }+    &:hover::before {+      background-color: @dls-menu-item-background-color-current-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-current-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-current-active;+    }++    // Indicators+    .@{veui-prefix}-menu-tree & {+      &::after {+        content: "";+        .absolute(_, -1px, _, _);+        .size(@dls-menu-indicator-width, inherit);+        background: @dls-menu-indicator-color;+      }+      &:hover::after {+        background-color: @dls-menu-indicator-color-hover;+      }+      &.focus-visible::after {+        background-color: @dls-menu-indicator-color-focus;+      }+      &:active::after {+        background-color: @dls-menu-indicator-color-active;+      }+    }+  }++  &-item.@{veui-prefix}-disabled &-item-icon,+  &-item.@{veui-prefix}-disabled &-item-label {+    color: @dls-menu-item-font-color-disabled;+  }++  &-item-expand-switcher {+    margin-left: 12px; // TODO+    position: relative;+    transform: rotateZ(90deg);+  }+  .@{veui-prefix}-tree-item-expanded &-item-expand-switcher {+    transform: rotateZ(-90deg);+  }++  &-item-expand-switcher,+  &-bottom-collapse-switcher {+    background: none;+    border: none;+    padding: 0;+    outline: none;+    cursor: pointer;+    line-height: 1;+    color: @dls-icon-color-aux;+    .@{veui-prefix}-icon {+      vertical-align: top;

flex?

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+import 'veui-theme-dls-icons/chevron-right'+import config from 'veui/managers/config'++config.defaults(+  {+    icons: {+      expand: 'chevron-right',+      collapse: 'chevron-right'+    },+    ui: {+      size: {+        values: ['s', 'm', 'l'],+        inherit: true,+        default: 'm'+      }+    },+    parts: {+      expand: 'icon',+      collapse: 'icon'

这两个可以用同一个,叫 toggle

xiaodemen

comment created time in 13 days

Pull request review commentecomfe/veui

feat: a new component Menu

+@import "../lib.less";+@import (reference) "../dropdown.less";++.@{veui-prefix}-menu {+  border-right: 1px solid @dls-menu-border-color;+  width: @dls-menu-width;++  &-collapsed {+    width: @dls-menu-width-collapsed;+  }++  &-tree,+  &-overlay {+    font-size: @dls-menu-font-size-m;+    .@{veui-prefix}-menu-link {+      text-decoration: none;+    }+  }++  // Item+  &-item {+    cursor: pointer;+    .centered-line(@dls-menu-item-height-m);+    &::before {+      content: "";+      .absolute(_, 0, _, 0);+      height: inherit;+      background-color: @dls-menu-item-background-color;+    }++    &-label {+      height: inherit;+      &::before {+        content: "";+        .absolute(_, 0, _, 0);+        height: inherit;+      }+    }++    &:hover::before {+      background-color: @dls-menu-item-background-color-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-active;+    }++    &-text,+    &-icon {+      position: relative;+      z-index: 1;+    }++    &-icon {+      margin-right: 12px; // TODO 缺少个 3p 的变量?+      .dls-icon-size(@dls-menu-item-icon-size);+    }+  }++  &-tree {+    position: relative;+    padding: @dls-menu-padding-y @dls-menu-padding-x;+    .@{veui-prefix}-tree-item {+      margin-bottom: @dls-menu-item-spacing;+      height: @dls-menu-item-height-m;+      // FIXME:Tree 的 before 先干掉,active 等状态放不上+      &::before {+        display: none;+      }+    }+    & > li:last-child > .@{veui-prefix}-tree-item {+      margin-bottom: 0;+    }+    ul {+      padding-left: @dls-menu-level-indent;+    }+    // FIXME,+    & > li > ul {+      padding-left: dls-sum(@dls-menu-level-indent, 1em);+    }+  }+  &-tree &-item {+    display: flex;+    flex: 1;+    align-items: center;+    outline: none;+    max-width: 100%;+  }+  &-tree &-link {+    flex: 1;+    display: flex;+    overflow: hidden;+    &:first-child {+      margin-left: 0;+    }+  }+  &-link &-item-text {+    white-space: nowrap;+    overflow: hidden;+    text-overflow: ellipsis;+  }++  // exact-active+  &-overlay &-item-exact-active:not(.@{veui-prefix}-disabled),+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-icon,+  &-item-exact-active:not(.@{veui-prefix}-disabled) &-item-label {+    color: @dls-menu-item-font-color-current-active;+    font-weight: @dls-menu-item-font-weight-current;+  }+  &-item-exact-active:not(.@{veui-prefix}-disabled) {+    &::before {+      background-color: @dls-menu-item-background-color-current;+    }+    &:hover::before {+      background-color: @dls-menu-item-background-color-current-hover;+    }+    &.focus-visible::before {+      background-color: @dls-menu-item-background-color-current-focus;+    }+    &:active::before {+      background-color: @dls-menu-item-background-color-current-active;+    }++    // Indicators+    .@{veui-prefix}-menu-tree & {+      &::after {+        content: "";+        .absolute(_, -1px, _, _);+        .size(@dls-menu-indicator-width, inherit);+        background: @dls-menu-indicator-color;+      }+      &:hover::after {+        background-color: @dls-menu-indicator-color-hover;+      }+      &.focus-visible::after {+        background-color: @dls-menu-indicator-color-focus;+      }+      &:active::after {+        background-color: @dls-menu-indicator-color-active;+      }+    }+  }++  &-item.@{veui-prefix}-disabled &-item-icon,+  &-item.@{veui-prefix}-disabled &-item-label {+    color: @dls-menu-item-font-color-disabled;+  }++  &-item-expand-switcher {+    margin-left: 12px; // TODO+    position: relative;+    transform: rotateZ(90deg);+  }+  .@{veui-prefix}-tree-item-expanded &-item-expand-switcher {+    transform: rotateZ(-90deg);+  }++  &-item-expand-switcher,+  &-bottom-collapse-switcher {

是不是起名分别叫:menu-item-toggle 和 menu-toggle 就好了

xiaodemen

comment created time in 13 days

pull request commentecomfe/veui

feat: a new component Menu

  • 二级导航缩进有问题

    image

  • 悬浮/焦点/点击状态下有部分文字颜色不对

  • 禁用状态不应该有交互样式变化,比如悬浮/点击的背景色

  • 侧边栏展开/收起的按钮应该在底部,需要一个容器高度大于内容的例子

  • 多级菜单的交互需要和 UE 明确一下,中间层级能否选中

    image

    特别是这种情况下,active 的项和其父级都应该有对应激活状态的显示,需要再处理一下。

  • 样式切换需要加上 transition,以及 toggle 按钮的旋转之类的。

  • 有时间的话可以考虑给 Tree 节点展开/收起加上动效。

xiaodemen

comment created time in 13 days

push eventvuejs/cn.vuejs.org

易良

commit sha 04df82fc05a4495144ace3d4b2614f8081ebf23e

docs: add spaces between chinese and english words (#1056)

view details

push time in 13 days

PR merged vuejs/cn.vuejs.org

docs: add spaces between chinese and english words

<!--

首先感谢您的参与! 为了让社区工作更有效率和质量,我们做了一些约定,希望得到您的理解和支持。

首先请阅读 README[1] 了解如何参与贡献。 如果你参与的是翻译相关的工作,有劳额外移步 wiki[2] 了解相关注意事项。

谢谢!

[1] https://github.com/vuejs/cn.vuejs.org/tree/master/README.md [2] https://github.com/vuejs/cn.vuejs.org/wiki

-->

+4 -4

0 comment

4 changed files

yiliang114

pr closed time in 13 days

push eventvuejs/cn.vuejs.org

Wen Sun

commit sha 7d1f5a6c832941973ac64edb4b3c0133cdaa10e8

Update components-custom-events.md (#1055) 移除多余的字符

view details

push time in 14 days

PR merged vuejs/cn.vuejs.org

Update components-custom-events.md

移除多余的字符

<!--

首先感谢您的参与! 为了让社区工作更有效率和质量,我们做了一些约定,希望得到您的理解和支持。

首先请阅读 README[1] 了解如何参与贡献。 如果你参与的是翻译相关的工作,有劳额外移步 wiki[2] 了解相关注意事项。

谢谢!

[1] https://github.com/vuejs/cn.vuejs.org/tree/master/README.md [2] https://github.com/vuejs/cn.vuejs.org/wiki

-->

+1 -1

0 comment

1 changed file

HermitSun

pr closed time in 14 days

issue commentJustineo/coplay

Update vender support

@KB00100100 Work in progress.

Justineo

comment created time in 14 days

issue openedJustineo/coplay

Update vender support

  • [x] Youku
  • [ ] Tudou
  • [x] Tencent Video
  • [ ] iQiyi
  • [ ] Sohu
  • [ ] YouTube
  • [ ] ACFun
  • [ ] bilibili
  • [ ] Le
  • [ ] Vimeo

created time in 14 days

startedecomfe/react-hooks

started time in 15 days

pull request commentecomfe/vue-echarts

feat: add getmap function

Thanks!

caizirong

comment created time in 16 days

push eventecomfe/vue-echarts

zirong

commit sha 802a3d71e279b226016b8b34915c73b06483eba5

feat: add getmap function (#417) fixes #415

view details

push time in 16 days

issue closedecomfe/vue-echarts

add getMap function

The type of this issue / Issue 类型

  • [x] Feature request / 新特性需求
  • [ ] Bug report / Bug 报告

Not introduced by ECharts / 非 ECharts 本身问题

Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。

  • [x] I've checked it's not a problem of ECharts itself. / 我已检查过,这个问题非 ECharts 本身的问题。

Details / 详情

How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的?

  • [ ] Bundled version/打包版本 (import ECharts from 'vue-echarts/dist/vue-echarts')
  • [x] The .vue component/.vue 组件 (import ECharts from 'vue-echarts')

The version of Vue-ECharts you are using / Vue-ECharts 的版本

3.1.3

Can we add echart's function which name is getMap ? I've tested in my local project, just add one line in a js file. According to this path /src/components/ECharts.vue, insert before line 267:

getMap(mapName) {
    return echarts.getMap(mapName)
}

This will be useful when someone need exact some place's geographic info such as longitude or latitude by registerMap and then getMap from a .json file downloading from internet. Thanks.

closed time in 16 days

caizirong

PR merged ecomfe/vue-echarts

feat: add getmap function

issue 415

+3 -0

0 comment

1 changed file

caizirong

pr closed time in 16 days

issue commentecomfe/vue-echarts

add getMap function

This will be useful when someone need exact some place's geographic info such as longitude or latitude by registerMap and then getMap from a .json file downloading from internet.

I think it's a legit use case. Would you like to make a pull request for this?

caizirong

comment created time in 16 days

push eventvuejs/rfcs

GU Yiling

commit sha 5b20452579a9a13840976c07d90290373f8dbf7a

fix: fix 2.x behavior in comparison table

view details

push time in 16 days

started2019ncovmemory/nCovMemory

started time in 16 days

delete branch vuejs/rfcs

delete branch : scoped-styles-changes-fix

delete time in 20 days

push eventecomfe/veui

Justineo

commit sha 4ec00e2572d8f1ee4b47caf76646dbbacb165b91

fix: use computed style (to leverage design tokens) instead of hard coded toast spacing

view details

push time in 20 days

create barnchvuejs/rfcs

branch : scoped-styles-changes-fix

created branch time in 20 days

pull request commentvuejs/rfcs

Scoped Style Changes

@yyx990803 Sure

yyx990803

comment created time in 20 days

fork Justineo/rfcs

RFCs for substantial changes / feature additions to Vue core

fork in 20 days

Pull request review commentvuejs/vue

fix(compiler): avoid converting &nbps; to spaces (fix #11059)

 const modifierRE = /\.[^.\]]+(?=[^\]]*$)/g const slotRE = /^v-slot(:|$)|^#/  const lineBreakRE = /[\r\n]/-const whitespaceRE = /\s+/g+const whitespaceRE = /[ \t\r\n]+/g

Maybe we should use space characters defined in HTML spec here?

despreston

comment created time in 21 days

more