diff --git a/src/App.vue b/src/App.vue index 7bb7450e4317f6e1e700d30dc52dba1db19909a5..65a3d2086d6b29fb8b7250205071aa818464fbfe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,13 +36,13 @@ import {defineComponent, ref} from 'vue' export default defineComponent({ setup() { - let visible = false + let visible = true const getName = (name: string) => { return name.substring(0, 1).toUpperCase() + name.substring(1) } let routesListFilter = ref([]) routesList.forEach((item: any) => { - if (item.name.indexOf('-README') !== -1) { + if (item.name.indexOf('-README') !== -1 && item.name.indexOf('.bak') === -1) { routesListFilter.value.push({ name: item.name.replace('-README', ''), path: item.path.replace('/readme', '') diff --git a/src/assets/scss/demo.scss b/src/assets/scss/demo.scss index 7e1d93faf672841b18091b743d2f67ccefc8ef26..dfc0ea5b17c5abe50ac026c43db5f32e15e2f934 100644 --- a/src/assets/scss/demo.scss +++ b/src/assets/scss/demo.scss @@ -111,3 +111,4 @@ table {width: 100%;border-spacing: 0; border-collapse: collapse;border: 1px soli .lazy-demo { img {max-width: 100%} } +.ak-dropdown{margin-right: 10px;} diff --git a/src/packages/backTop/index.vue b/src/packages/backTop/index.vue index 1a9a35c7b399f46284cbb22aa219ea5f8a628200..0ed621ade6f609dd3fe4aa51723b16d7fd32550e 100644 --- a/src/packages/backTop/index.vue +++ b/src/packages/backTop/index.vue @@ -4,7 +4,7 @@ ref="element" :class="`${prefixCls}-back-top`" :style="{right:right+'px',bottom:bottom+'px',opacity:show?1:0,visibility:show?'visible':'hidden'}" - @click="elClick"> + @click.stop="elClick"> @@ -28,27 +28,33 @@ export default defineComponent({ const show = ref(false) // const element = ref() const element = ref() + let stop: any = null const elClick = () => { smoothscroll() function smoothscroll() { const currentScroll = scrollTop() if (currentScroll > 0) { - window.requestAnimationFrame(smoothscroll) + stop = window.requestAnimationFrame(smoothscroll) window.scrollTo(0, currentScroll - (currentScroll / 5)) } } emit('click') } + const documentClick = () => { + stop && window.cancelAnimationFrame(stop)//可以取消该次动画 + } onMounted(() => { nextTick(() => { document.body.appendChild(element.value) window.addEventListener('scroll', windowScroll) + document.addEventListener('click', documentClick) }) }) onBeforeUnmount(() => { window.removeEventListener('scroll', windowScroll) + document.removeEventListener('click', documentClick) if (element.value && element.value.parentNode) { element.value.parentNode.removeChild(element.value) } diff --git a/src/packages/cascader.bak/README.md b/src/packages/cascader.bak/README.md new file mode 100644 index 0000000000000000000000000000000000000000..5714c3218e9c3f4c3969f30b5b2267a3464095e4 --- /dev/null +++ b/src/packages/cascader.bak/README.md @@ -0,0 +1,121 @@ + + +# Cascader 级联选择器 + +地区数据来源:使用网上省市三级联系的地区js数据 + +### 基础用法 + +```vue demo + + +``` + +### 初始值 + +```vue demo + + +``` + +### 自定义下拉数据 + +```vue demo + + +``` + +## API + +### Cascader + +|参数|类型|说明| +|----------|--------------|--------| +|v-model | Array |当前值| +|placeholder | String |提示点位| +|disabled | Boolean/false |禁用| +|tipsText | String |下拉提示文字| +|selectText | Array |选择提示,默认['请选择省', '请选择市', '请选择区']| +|data | Array |自定义下拉数据| + +### Cascader Event + +|参数| 说明| +|----------|--------| +|change |选择回调| + +### data + +|参数|类型|说明| +|----------|--------------|--------| +|name | String |选项名称| +|children | Array |子级数据,见自定义数据格式| diff --git a/src/packages/cascader/cityData.json b/src/packages/cascader.bak/cityData.json similarity index 100% rename from src/packages/cascader/cityData.json rename to src/packages/cascader.bak/cityData.json diff --git a/src/packages/cascader/forEachItem.vue b/src/packages/cascader.bak/forEachItem.vue similarity index 100% rename from src/packages/cascader/forEachItem.vue rename to src/packages/cascader.bak/forEachItem.vue diff --git a/src/packages/cascader/index.bak.vue b/src/packages/cascader.bak/index.vue similarity index 100% rename from src/packages/cascader/index.bak.vue rename to src/packages/cascader.bak/index.vue diff --git a/src/packages/cascader/README.md b/src/packages/cascader/README.md index 5714c3218e9c3f4c3969f30b5b2267a3464095e4..296a6d5c0fc42ac628f935f81257db4d47c46d4d 100644 --- a/src/packages/cascader/README.md +++ b/src/packages/cascader/README.md @@ -2,120 +2,307 @@ # Cascader 级联选择器 -地区数据来源:使用网上省市三级联系的地区js数据 - ### 基础用法 ```vue demo - +``` -export default { - setup() { - const value1 = ref([]) - return { - value1 - } - } -} +### 默认初始值 + +```vue demo + + ``` -### 初始值 +### 禁用选项 + +通过在数据源中设置 `disabled` 字段来声明该选项是禁用的 ```vue demo - +``` -export default { - setup() { - const value1 = ref(["广东", "广州市", "天河区"]) - return { - value1 - } - } -} +### 可清空 + +通过在数据源中设置 `disabled` 字段来声明该选项是禁用的 + +```vue demo + + +``` + +### 多选 + +通过在数据源中设置 `disabled` 字段来声明该选项是禁用的 + +```vue demo + + ``` -### 自定义下拉数据 +### 可搜索 + +开启`filterable`可以快捷地搜索选项并选择 ```vue demo - +``` + +### 异步加载 + +通过`lazy`开启异步加载,并通过`lazyload`来设置加载数据源的方法。 `lazyload`方法有两个参数,第一个参数`node`为当前点击的节点,第二个`resolve`为数据加载完成的回调(必须调用) + +```vue demo + + + + +``` + +### 选择任意项 + +使用`checkAny`可选择任意项 + +```vue demo + + + ``` ## API ### Cascader -|参数|类型|说明| -|----------|--------------|--------| -|v-model | Array |当前值| -|placeholder | String |提示点位| -|disabled | Boolean/false |禁用| -|tipsText | String |下拉提示文字| -|selectText | Array |选择提示,默认['请选择省', '请选择市', '请选择区']| -|data | Array |自定义下拉数据| +| 参数 | 类型 | 说明 | +|---------------|---------------|------------------------| +| v-model | array | 显示的值 | +| width | string | 组件宽 | +| multiple | boolean/false | 多选模式 | +| collapseTags | boolean/false | 多选模式下是否折叠Tag | +| clear | boolean/false | 是否可清空 | +| filterable | boolean/false | 是否可搜索选项 | +| size | string | 大小 | +| placeholder | string | 占位符 | +| disabled | boolean/false | 禁用状态 | +| direction | number | 下拉的方向动画,0默认 1向下 2向上 | +| downClass | string | 下拉面板类 | +| downStyle | object | 下拉面板样式 | +| appendToBody | boolean/false | 下拉插入到body | +| downHeight | number | 下拉的面板的高 | +| icon | string | icon图标 | +| options | object | 下拉面板选项数据 | +| optionsKey | object | 指定选择数据的`label`和`value`属于,默认{label:‘label’,value:‘value’} | +| showAllLevels | boolean/true | 定义了是否显示完整的路径,将其赋值为`false`则仅显示最后一级 | +| lazy | boolean/false | 是否动态加载子节点,需与 `lazyLoad` 方法结合使用 | +| lazyLoad | function | 加载动态数据的方法,仅在 `lazy` 为 `true` 时有效,function(node, resolve),node为当前点击的节点,resolve为数据加载完成的回调(必须调用) | +| checkAny | boolean/false | 启用该功能后,选择任意一级选项。 | +| emptyText | string | 无下拉数据提示文案 | ### Cascader Event -|参数| 说明| -|----------|--------| -|change |选择回调| +|参数| 说明 | +|----------|-------------| +|change | 选择事件 | +| input | 可搜索时输入框改变事件 | +| blur | 可搜索时输入框焦点事件 | +| focus | 可搜索时输入框获得焦点事件 | +| clear | 清空事件 | +| delete | 删除单个选项,多选时有效 | -### data +### Cascader Options -|参数|类型|说明| -|----------|--------------|--------| -|name | String |选项名称| -|children | Array |子级数据,见自定义数据格式| +| 参数 | 类型 | 说明 | +|----------|---------------|---------------| +| label | String | 选项名称 | +| value | String/number | 选项对应的值,应唯一 | +| disabled | boolean | 禁用当前项 | +| children | Array | 子级数据,见自定义数据格式 | diff --git a/src/packages/cascader/demo.json b/src/packages/cascader/demo.json new file mode 100644 index 0000000000000000000000000000000000000000..dd2eddf588750209b462aaea07990f12a15a615c --- /dev/null +++ b/src/packages/cascader/demo.json @@ -0,0 +1,137 @@ +[ + { + "value": "广东", + "label": "广东", + "children": [ + { + "value": "广州", + "label": "广州", + "children": [ + { + "value": "天河", + "label": "天河" + }, + { + "value": "白云", + "label": "白云" + }, + { + "value": "越秀", + "label": "越秀" + }, + { + "value": "海珠", + "label": "海珠" + } + ] + }, + { + "value": "深圳", + "label": "深圳", + "children": [ + { + "value": "罗湖区", + "label": "罗湖区" + }, + { + "value": "宝安区", + "label": "宝安区" + }, + { + "value": "南山区", + "label": "南山区" + }, + { + "value": "龙岗区", + "label": "龙岗区" + }, + { + "value": "盐田区", + "label": "盐田区" + } + ] + }, + { + "value": "东莞", + "label": "东莞", + "children": [ + { + "value": "长安", + "label": "长安" + }, + { + "value": "虎门", + "label": "虎门" + }, + { + "value": "茶山", + "label": "茶山" + } + ] + }, + { + "label": "禁用测试", + "disabled": true, + "value": "1", + "children": [ + { + "label": "禁用测试2", + "value": "2" + } + ] + } + ] + }, + { + "value": "北京", + "label": "北京", + "children": [ + { + "value": "西城区", + "label": "西城区" + }, + { + "value": "崇文区", + "label": "崇文区" + }, + { + "value": "宣武区", + "label": "宣武区" + }, + { + "value": "朝阳区", + "label": "朝阳区" + }, + { + "value": "丰台区", + "label": "丰台区" + }, + { + "value": "海淀区", + "label": "海淀区" + } + ] + }, + { + "value": "上海", + "label": "上海", + "children": [ + { + "value": "黄浦区", + "label": "黄浦区" + }, + { + "value": "卢湾区", + "label": "卢湾区" + }, + { + "value": "徐汇区", + "label": "徐汇区" + }, + { + "value": "广州1", + "label": "广州" + } + ] + } +] diff --git a/src/packages/cascader/index.vue b/src/packages/cascader/index.vue index e86179aca5e486fea9f631e3f9b4a6ec934d5589..4a18b34b845ca19345972d251f9ced7a7e3c0c5f 100644 --- a/src/packages/cascader/index.vue +++ b/src/packages/cascader/index.vue @@ -1,258 +1,519 @@ - + - diff --git a/src/packages/checkbox/README.md b/src/packages/checkbox/README.md index 17560d98c3d9f0cae48005254031d6332cb0479c..cd051c72541e4c053bd8635633eed9adda2e89db 100644 --- a/src/packages/checkbox/README.md +++ b/src/packages/checkbox/README.md @@ -312,12 +312,12 @@ export default { ### CheckboxGroup -> options |参数|类型|说明| |----------|--------------|--------| |v-model | Array |当前选中的值| |options | Array |选项数据| +| optionsKey | object | 指定选择数据的label和value属于,默认{label:'label',value:'value'} | |max | number |可被勾选的 checkbox 的最大数量| |min | number |可被勾选的 checkbox 的最小数量| |disabled | Boolean/false |禁用组| diff --git a/src/packages/checkbox/group.vue b/src/packages/checkbox/group.vue index 6f48eb16340ad0add4b2e2dec68863ec21bb06ce..2d507c03090da4397c8123884373d81fab4b8913 100644 --- a/src/packages/checkbox/group.vue +++ b/src/packages/checkbox/group.vue @@ -5,8 +5,8 @@ v-for="(item,index) in options" :key="index" v-model="groupValue" - :value="item.value" - :label="item.label||item.value" + :value="item[optionsKey.value]" + :label="item[optionsKey.label]||item[optionsKey.value]" :disabled="disabled||item._disabled||item.disabled" :class="item.class" :before-change="beforeChange" @@ -17,7 +17,7 @@ import Checkbox from './checkbox.vue' import {prefixCls} from '../prefix' import pType from '../util/pType' -import {defineComponent, ref, watch} from 'vue' +import {defineComponent, ref, watch,toRefs} from 'vue' import {FormControlOption} from '../types' export default defineComponent({ @@ -25,6 +25,7 @@ export default defineComponent({ components: {Checkbox}, props: { options: pType.array(), + optionsKey: pType.object({label: 'label', value: 'value'}), modelValue: pType.array([]), name: String, max: pType.number(), @@ -38,19 +39,21 @@ export default defineComponent({ watch(() => props.modelValue, (v: any) => { groupValue.value = v }) + const {optionsKey} = toRefs(props) + const optValue = optionsKey.value.value const setChecked = (arr: string[]) => { const newLen = arr.length if (newLen >= props.max) { // 将所有未勾选的设为禁用状态 props.options.forEach((item: any) => { - if (arr.indexOf(item.value) === -1) { + if (arr.indexOf(item[optValue]) === -1) { item._disabled = true } }) } else if (newLen <= props.min) { // 将所有已勾选的设为禁用状态 props.options.forEach((item: any) => { - if (arr.indexOf(item.value) !== -1) { + if (arr.indexOf(item[optValue]) !== -1) { item._disabled = true } }) @@ -72,16 +75,16 @@ export default defineComponent({ props.options && props.options.forEach((item: any) => { if (boolean) { // 全选时 - if (item.disabled && props.modelValue.indexOf(item.value) === -1) { + if (item.disabled && props.modelValue.indexOf(item[optValue]) === -1) { // 禁用且没有勾选的过滤 } else { - value.push(item.value) + value.push(item[optValue]) } } else { // 取消选择时 - if (item.disabled && props.modelValue.indexOf(item.value) !== -1) { + if (item.disabled && props.modelValue.indexOf(item[optValue]) !== -1) { // 禁用且没有勾选的过滤 - value.push(item.value) + value.push(item[optValue]) } } }) @@ -90,7 +93,7 @@ export default defineComponent({ // 返回所选值 const getValue = () => { return props.options.filter((item: any) => { - return props.modelValue.indexOf(item.value) !== -1 + return props.modelValue.indexOf(item[optValue]) !== -1 }) } return { diff --git a/src/packages/datePicker/index.vue b/src/packages/datePicker/index.vue index 74ffe7b23c8fe51ba51146435e20d33f32ba1c00..724654923e437ccde78162347e0eac7cadeb3bae 100644 --- a/src/packages/datePicker/index.vue +++ b/src/packages/datePicker/index.vue @@ -26,8 +26,7 @@ + +``` + +### 触发对象 + +通过具名`slot`为`dropdown` 来设置下拉菜单。默认情况下,下拉按钮只要`hover`即可,无需点击也会显示下拉菜单 + +```vue demo + + + +``` + +### 事件 + +```vue demo + + +``` + +## API + +### Dropdown + +|参数| 类型 | 说明 | +|-------|---------------|------------------------| +|trigger | String/hover | 触发下拉的行为,hover和click | +|appendToBody | Boolean/false | 插入到body | +|direction | Number/0 | 下拉弹出方向,0自动,1向上,2向下 | +|downClass | string | 展开面板类名 | + +### DropdownItem + +|参数|类型|说明| +|-------|-------|--------| +|disabled | Boolean/false |禁用状态| +|className | String |类名| + +### Dropdown Event + +|参数|说明| +|------|------| +|click |点击事件| + +### Dropdown Methods + +| 参数 | 说明 | +|---------|---------------------------------------------| +| slideUp | 用于收起下拉,仅当`trigger`为`click`时 | +| toggle | 展开或收起下拉事件,function(down){true为展开状态,false收起} | + +### Dropdown Slot + +|参数| 说明 | +|------|--------| +|dropdown | 下拉内容 | +|trigger | 触发下拉标签 | diff --git a/src/packages/dropdown/dropdown.vue b/src/packages/dropdown/dropdown.vue new file mode 100644 index 0000000000000000000000000000000000000000..464a1f56b78b0177755016472753106644949717 --- /dev/null +++ b/src/packages/dropdown/dropdown.vue @@ -0,0 +1,188 @@ + + + + diff --git a/src/packages/dropdown/dropdownItem.vue b/src/packages/dropdown/dropdownItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..e7f2ed42a17a91d4fee49e211c940e165036c199 --- /dev/null +++ b/src/packages/dropdown/dropdownItem.vue @@ -0,0 +1,30 @@ + + diff --git a/src/packages/dropdown/index.ts b/src/packages/dropdown/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..f28d8c34ef2925650f3a5f79b3bd444aa2ebe164 --- /dev/null +++ b/src/packages/dropdown/index.ts @@ -0,0 +1,4 @@ +import Dropdown from './dropdown.vue' +import DropdownItem from './dropdownItem.vue' + +export {Dropdown, DropdownItem} diff --git a/src/packages/form/README.md b/src/packages/form/README.md index ab681726b488edb24c8843bab2ac3f45878114ce..383e58f948810e88d74ea86a1bcebe4706c4c045 100644 --- a/src/packages/form/README.md +++ b/src/packages/form/README.md @@ -84,7 +84,7 @@ export default { ```vue demo