.storybook/preview.js

@@ -57,6 +57,7 @@ import LwcRadioButton from '../src/stories/radio/button';
 import LwcTagsList from '../src/stories/tags/list';
 import LwcDialogForm from '../src/stories/dialog/form';
 import LwcSelectExtend from '../src/stories/select/extend';
+import LwcSelectCascaderExtend from '../src/stories/select/cascader-extend';
 import TplOptionForm from '../src/__mock__/template/option-form.vue';
 
 Vue.use(LwcDataDisplayDescriptions);
@@ -73,6 +74,7 @@ Vue.use(LwcSelectDownTable);
 Vue.use(LwcRadioButton);
 Vue.use(LwcTagsList);
 Vue.use(LwcSelectExtend);
+Vue.use(LwcSelectCascaderExtend);
 Vue.use(LwcDialogForm);
 Vue.component(TplOptionForm.name, TplOptionForm);
 

CHANGELOG.md

-## [1.0.2](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v1.0.1...v1.0.2) (2022-03-14)
+## [1.0.3](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v1.0.2...v1.0.3) (2022-03-17)
 
 
 ### Features
 
 * 新增 lwc-select 组件，支持延迟加载、远程搜索、默认值、快速新增 ([67e5589](http://git.leadwaycloud.com/package/lwc-ui-components/commits/67e5589abffe75bf93330c29ccbdda8b28857ad4))
 * 新增组件 lwc-select-extend 高级选择组件 ([ea3cccb](http://git.leadwaycloud.com/package/lwc-ui-components/commits/ea3cccbeb86724793d5f71b63e794fc93ef8ba2e)), closes [#58](http://git.leadwaycloud.com/package/lwc-ui-components/issues/58)
+* 优化部分 card 组件，增加 lazy，options 属性 ([e9c0d76](http://git.leadwaycloud.com/package/lwc-ui-components/commits/e9c0d76a1f42eddd26a2cd70c2175fac08ec28f2))
 
 
 

build/bin/new.js

@@ -24,7 +24,7 @@ const askQuestions = () => {
 	  {
 		name: "GROUP",
 		type: "input",
-		message: "请输入分组名称",
+		message: "请输入分组名称(例如: common-components)",
 		validate: function(value) {
 			if (!value) {
 				return "分组名称不能为空";
@@ -36,7 +36,7 @@ const askQuestions = () => {
 	  {
 		name: "NAME",
 		type: "input",
-		message: "请输入创建的组件名称(example: button)",
+		message: "请输入创建的组件名称(例如: button-group)",
 		validate: function(value) {
 			if (!value) {
 				return "组件名称不能为空";
@@ -48,7 +48,7 @@ const askQuestions = () => {
 	  {
 		name: "CHINESENAME",
 		type: "input",
-		message: "请输入组件中文名称(example: 按钮)"
+		message: "请输入组件中文名称(例如: 按钮组)"
 	  },
 	  {
 		name: "CHINESENAME_TYPE",

package-lock.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@package/lwc-ui-components",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "license": "UNLICENSED",
       "dependencies": {
         "@mdx-js/vue-loader": "^1.6.22",

package.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "description": "立威云UI组件库",
   "author": "",

src/index.js

@@ -73,6 +73,7 @@ import LwcOtherCopyright from './stories/other/copyright/index.js';
 import LwcOtherQrcode from './stories/other/qrcode/index.js';
 import LwcOtherQuickInput from './stories/other/quick-input/index.js';
 import LwcRadioButton from './stories/radio/button/index.js';
+import LwcSelectCascaderExtend from './stories/select/cascader-extend/index.js';
 import LwcSelectDialog from './stories/select/dialog/index.js';
 import LwcSelectDownTable from './stories/select/down-table/index.js';
 import LwcSelectExtend from './stories/select/extend/index.js';
@@ -164,6 +165,7 @@ const components = [
   LwcOtherQrcode,
   LwcOtherQuickInput,
   LwcRadioButton,
+  LwcSelectCascaderExtend,
   LwcSelectDialog,
   LwcSelectDownTable,
   LwcSelectExtend,
@@ -207,7 +209,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '1.0.2',
+  version: '1.0.3',
   install,
   LwcBasicButton,
   LwcBasicButtonIcon,
@@ -282,6 +284,7 @@ export default {
   LwcOtherQrcode,
   LwcOtherQuickInput,
   LwcRadioButton,
+  LwcSelectCascaderExtend,
   LwcSelectDialog,
   LwcSelectDownTable,
   LwcSelectExtend,

src/stories/changelog.stories.mdx

@@ -8,6 +8,13 @@
 `新特性`
 `非兼容性更新`
 
+---
+### **v1.0.3 20220317**
+
+#### 优化
+
+- 优化部分 card 组件，支持 lazy 加载图片和传入自定义 options
+
 ---
 ### **v1.0.2 20220314**
 

src/stories/data-display/descriptions/index.stories.js

@@ -123,8 +123,50 @@ StaticRender.args = {
 const MultipleBlockTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { LwcDataDisplayDescriptions },
-	template: `<div><lwc-data-display-descriptions v-bind="$props" />
-		<lwc-data-display-descriptions v-bind="$props" /></div>`,
+	data() {
+		return {
+			args2: {
+				title: "基本信息",
+				column: 3,
+				layout: "horizontal",
+				className: [ 'mt-8' ],
+				data: {
+					title: "商机标题长长长长长",
+					customer: "恩科技有限公司",
+					orderNo: "PO2021030100001",
+					partner: "李小红",
+					saleAmount: "¥2010,00",
+					saleDate: "2019-03-28",
+					step: "初步洽谈暂时未进一步沟通",
+					type: "-",
+					createdDate: "2019-03-28",
+					attribution: "赵小刚"
+				},
+				items: [{
+					label: "商机标题",
+					field: "title",
+				}, {
+					label: "关联订单",
+					field: "orderNo",
+				}, {
+					label: "主要联系人",
+					field: "partner",
+				}, {
+					label: "预计销售金额",
+					field: "saleAmount",
+				}, {
+					label: "预计签单日期",
+					field: "saleDate",
+				}]
+			}
+		}
+	},
+	render: function(h) {
+		return h('div', {}, [
+			h('lwc-data-display-descriptions', { props: this.args2, attrs: { } }),
+			h('lwc-data-display-descriptions', { props: this.$props, attrs: { } }),
+		]);
+	},
 });
 
 export const MultipleBlock = MultipleBlockTemplate.bind({});

src/stories/data-display/descriptions/src/index.js

@@ -84,6 +84,13 @@ export default {
 					size: "medium",
 					layout: "horizontal",
 					colon: true,
+					contentStyle: {
+						"min-width": "360px" // 默认内容最小宽度
+					},
+					labelStyle: {
+						"min-width": "200px", // 默认标题最小宽度
+						"max-width": "500px" // 默认标题最大宽度
+					},
 					...this.$attrs
 				},
 				class: className

src/stories/select/cascader-extend/index.js

+import LwcSelectCascaderExtend from './src/index.js';
+
+/* istanbul ignore next */
+LwcSelectCascaderExtend.install = function(Vue) {
+	Vue.component(LwcSelectCascaderExtend.name, LwcSelectCascaderExtend);
+};
+
+export default LwcSelectCascaderExtend;

src/stories/select/cascader-extend/index.stories.js

+import { h } from '@vue/composition-api';
+import LwcSelectCascaderExtend from './src/index.js';
+export default {
+	title: "Design System/Select/高级级联选择器",
+	component: LwcSelectCascaderExtend,
+	argTypes: {},
+	decorators: [() => ({ template: '<el-col class="bg-white p-4"><story/></el-col>' })]
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { LwcSelectCascaderExtend },
+	template: '<lwc-select-cascader-extend v-bind="$props" />',
+});
+
+const mockOptions = [{
+	value: 'zhinan',
+	label: '指南',
+	children: [{
+	  value: 'shejiyuanze',
+	  label: '设计原则',
+	  children: [{
+		value: 'yizhi',
+		label: '一致'
+	  }, {
+		value: 'fankui',
+		label: '反馈'
+	  }, {
+		value: 'xiaolv',
+		label: '效率'
+	  }, {
+		value: 'kekong',
+		label: '可控'
+	  }]
+	}, {
+	  value: 'daohang',
+	  label: '导航',
+	  children: [{
+		value: 'cexiangdaohang',
+		label: '侧向导航'
+	  }, {
+		value: 'dingbudaohang',
+		label: '顶部导航'
+	  }]
+	}]
+  }, {
+	value: 'zujian',
+	label: '组件',
+	children: [{
+	  value: 'basic',
+	  label: 'Basic',
+	  children: [{
+		value: 'layout',
+		label: 'Layout 布局'
+	  }, {
+		value: 'color',
+		label: 'Color 色彩'
+	  }, {
+		value: 'typography',
+		label: 'Typography 字体'
+	  }, {
+		value: 'icon',
+		label: 'Icon 图标'
+	  }, {
+		value: 'button',
+		label: 'Button 按钮'
+	  }]
+	}, {
+	  value: 'form',
+	  label: 'Form',
+	  children: [{
+		value: 'radio',
+		label: 'Radio 单选框'
+	  }, {
+		value: 'checkbox',
+		label: 'Checkbox 多选框'
+	  }, {
+		value: 'input',
+		label: 'Input 输入框'
+	  }, {
+		value: 'input-number',
+		label: 'InputNumber 计数器'
+	  }, {
+		value: 'select',
+		label: 'Select 选择器'
+	  }, {
+		value: 'cascader',
+		label: 'Cascader 级联选择器'
+	  }, {
+		value: 'switch',
+		label: 'Switch 开关'
+	  }, {
+		value: 'slider',
+		label: 'Slider 滑块'
+	  }, {
+		value: 'time-picker',
+		label: 'TimePicker 时间选择器'
+	  }, {
+		value: 'date-picker',
+		label: 'DatePicker 日期选择器'
+	  }, {
+		value: 'datetime-picker',
+		label: 'DateTimePicker 日期时间选择器'
+	  }, {
+		value: 'upload',
+		label: 'Upload 上传'
+	  }, {
+		value: 'rate',
+		label: 'Rate 评分'
+	  }, {
+		value: 'form',
+		label: 'Form 表单'
+	  }]
+	}, {
+	  value: 'data',
+	  label: 'Data',
+	  children: [{
+		value: 'table',
+		label: 'Table 表格'
+	  }, {
+		value: 'tag',
+		label: 'Tag 标签'
+	  }, {
+		value: 'progress',
+		label: 'Progress 进度条'
+	  }, {
+		value: 'tree',
+		label: 'Tree 树形控件'
+	  }, {
+		value: 'pagination',
+		label: 'Pagination 分页'
+	  }, {
+		value: 'badge',
+		label: 'Badge 标记'
+	  }]
+	}, {
+	  value: 'notice',
+	  label: 'Notice',
+	  children: [{
+		value: 'alert',
+		label: 'Alert 警告'
+	  }, {
+		value: 'loading',
+		label: 'Loading 加载'
+	  }, {
+		value: 'message',
+		label: 'Message 消息提示'
+	  }, {
+		value: 'message-box',
+		label: 'MessageBox 弹框'
+	  }, {
+		value: 'notification',
+		label: 'Notification 通知'
+	  }]
+	}, {
+	  value: 'navigation',
+	  label: 'Navigation',
+	  children: [{
+		value: 'menu',
+		label: 'NavMenu 导航菜单'
+	  }, {
+		value: 'tabs',
+		label: 'Tabs 标签页'
+	  }, {
+		value: 'breadcrumb',
+		label: 'Breadcrumb 面包屑'
+	  }, {
+		value: 'dropdown',
+		label: 'Dropdown 下拉菜单'
+	  }, {
+		value: 'steps',
+		label: 'Steps 步骤条'
+	  }]
+	}, {
+	  value: 'others',
+	  label: 'Others',
+	  children: [{
+		value: 'dialog',
+		label: 'Dialog 对话框'
+	  }, {
+		value: 'tooltip',
+		label: 'Tooltip 文字提示'
+	  }, {
+		value: 'popover',
+		label: 'Popover 弹出框'
+	  }, {
+		value: 'card',
+		label: 'Card 卡片'
+	  }, {
+		value: 'carousel',
+		label: 'Carousel 走马灯'
+	  }, {
+		value: 'collapse',
+		label: 'Collapse 折叠面板'
+	  }]
+	}]
+  }, {
+	value: 'ziyuan',
+	label: '资源',
+	children: [{
+	  value: 'axure',
+	  label: 'Axure Components'
+	}, {
+	  value: 'sketch',
+	  label: 'Sketch Templates'
+	}, {
+	  value: 'jiaohu',
+	  label: '组件交互文档'
+	}]
+  }]
+
+export const Default = Template.bind({});
+Default.args = {
+	value: 1,
+	options: mockOptions,
+	cascaderConfig: {},
+	footerConfig: [
+		{
+			label: "自定义按钮",
+			icon: 'el-icon-circle-plus-outline',
+			key: 'custom',
+			click: (item) => {
+				console.log("click item1:", item);
+			},
+		},
+		{
+			label: "创建选项",
+			key: 'add',
+			icon: 'el-icon-plus',
+			click: {
+				type: 'dialog',
+				props: {
+					name: '创建选项自定义标题',
+					height: '80%',
+					footerClass: 'text-left'
+				},
+				itemRender: {
+					name: 'tpl-option-form'
+				}
+			},
+		},
+	],
+};
+
+const asyncMockOptions = async (newItem) => {
+	console.log("触发延迟加载数据");
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			console.log('newItem:', newItem)
+			if (newItem) {
+				resolve([newItem, ...mockOptions])
+			} else {
+				resolve(mockOptions);
+			}
+		}, 1000);
+	});
+};
+
+export const AsyncLoad = Template.bind({});
+AsyncLoad.storyName = '异步加载';
+AsyncLoad.args = {
+	value: 1,
+	options: mockOptions,
+	cascaderConfig: {
+		// filterable: true
+	},
+	asyncLoadMethod: asyncMockOptions,
+	footerConfig: [
+		{
+			label: "创建选项",
+			key: 'add',
+			icon: 'el-icon-plus',
+			click: {
+				type: 'dialog',
+				props: {
+					name: '创建选项自定义标题',
+					height: '80%',
+					footerClass: 'text-left'
+				},
+				itemRender: {
+					name: 'tpl-option-form'
+				}
+			},
+		},
+	],
+};
+
+export const DefaultValue = Template.bind({});
+DefaultValue.storyName = '默认值显示';
+DefaultValue.args = {
+	value: "yizhi",
+	options: [],
+	cascaderConfig: {
+		filterable: true,
+		clearable: true,
+		props: {
+			// multiple: true
+		}
+	},
+	asyncLoadMethod: asyncMockOptions,
+	footerConfig: [
+		{
+			label: "创建选项",
+			key: 'add',
+			icon: 'el-icon-plus',
+			click: {
+				type: 'dialog',
+				props: {
+					name: '创建选项自定义标题',
+					height: '80%',
+					footerClass: 'text-left'
+				},
+				itemRender: {
+					name: 'tpl-option-form'
+				}
+			},
+		},
+	],
+	defaultOption: {
+		label: '一致',
+		value: "yizhi"
+	}
+};
+
+const ElementWidgetTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { LwcSelectCascaderExtend },
+	data() {
+		return {
+			value: []
+		}
+	},
+	render(h) {
+		const _this = this
+		return h('lwc-select-cascader-extend', {
+			props: {
+				...this.$props,
+				value: this.value,
+			},
+			on: {
+				"update:value": function(v) {
+					_this.value = v;
+				}
+			}
+		})
+	},
+	// template: '<lwc-select-cascader-extend v-bind="$props" />',
+});
+
+export const ElementWidget = ElementWidgetTemplate.bind({});
+ElementWidget.storyName = 'ElementUI属性';
+ElementWidget.args = {
+	// value: [],
+	options: mockOptions,
+	cascaderConfig: {
+		filterable: true,
+		clearable: true,
+		props: {
+			multiple: true
+		}
+	},
+	asyncLoadMethod: asyncMockOptions,
+	footerConfig: [
+	],
+};
+
+const HocRenderTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	data() {
+		return {
+			formData: {
+				value: []
+			}
+		}
+	},
+	render(h) {
+		const _this = this;
+		return h('div', {}, [
+			h('vxe-form', {
+				props: {
+					...this.$props,
+					data: this.formData
+				}
+			}, []),
+			h('div', { class: 'px-4' }, `已选: ${JSON.stringify(_this.formData)}`),
+			// h('el-button', { props: { type: 'primary' }, on: {
+			// 	click: () => {
+			// 		console.log('submit data:', _this.formData)
+			// 	}
+			// } }, '确认提交')
+		])
+	},
+});
+
+export const HocRender = HocRenderTemplate.bind({});
+HocRender.storyName = "HocRender";
+HocRender.args = {
+	data: {
+		value: []
+	},
+	titleWidth: 80,
+	titleAlign: 'right',
+	'prevent-submit': false,
+	items: [
+		{
+			field: 'value', title: 'hoc选项', span: 12, itemRender: {
+				name: "ElHoc",
+				hocName: "lwc-select-cascader-extend",
+				updateValue: true,
+				props: {
+					...DefaultValue.args,
+					// value: undefined
+				}
+			}
+		},
+	]
+};

src/stories/select/cascader-extend/src/index.js

+import { isUndefined, isEmpty, isString, isArray } from "lodash";
+
+export default {
+	name: 'lwc-select-cascader-extend',
+	props: {
+		value: {
+			type: [Number, String, Boolean, Array, Object],
+			// required: true
+		},
+		options: {
+			type: Array,
+			default: () => []
+		},
+		cascaderConfig: {
+			type: Object,
+			default: () => {}
+		},
+		className: {
+			type: [String, Array],
+		},
+		footerConfig: {
+			type: Array,
+			default: () => []
+		},
+		asyncLoadMethod: { // 异步加载数据方法
+			type: Function
+		},
+		defaultOption: { // 默认值选项对象
+			type: [Object, Array],
+			default: () => {}
+		},
+	},
+	data() {
+		return {
+			renderOptions: [], // 选项
+			hasLoaded: false, // 是否已加载
+			dialogConfig: { // 弹窗配置
+				title: '快速创建', // 名称
+				status: false,
+				itemRender: null
+			},
+			refName: `lwc_select_cascader_${new Date().getTime()}`
+		}
+	},
+	methods: {
+		/**
+		 * 处理底部按钮点击事件
+		 * @param {*} config 配置
+		 */
+		 handleFooterItemClick(config) {
+			 if (!config || !config.click) {
+				 throw new Error('footerConfig.click is required');
+			 }
+			if (typeof config.click === 'object') {
+				const { type, itemRender, props, attrs } = config.click;
+				const selectRef = this.$refs[this.refName];
+				switch(type) {
+					case 'dialog':
+						this.dialogConfig = {
+							status: true,
+							itemRender,
+							props: { // 传递给 vxe-modal 的 props
+								name: config.name || '快速创建',
+								width: '80%',
+								...props
+							},
+							attrs: {
+								...attrs
+							}
+						}
+						selectRef && selectRef.toggleDropDownVisible(false);
+						break;
+					default:
+						throw Error('目前 lwc-select-cascader-extend click 回调类型只支持 dialog')
+				}
+			} else if (typeof config.click === 'function') {
+				config.click && config.click(config.name);
+			} else {
+				throw new Error('footerConfig.click is fail');
+			}
+		},
+		/**
+		 * 处理弹窗确认事件回调，更新选项，更新值
+		 * @param {*} newItem 新增的选项
+		 */
+		 async handleDialogFormCallback(newItem, itemValue) {
+			try {
+				if (!isUndefined(this.asyncLoadMethod)) {
+					const newList = await this.asyncLoadMethod(newItem); // 重新出发异步加载
+					this.combinationFooterWithOptions(newList);
+				}
+
+				// 普通 / 异步加载 / 远程搜索
+				this.$emit('addOption', { item: newItem, value: itemValue }); // 发送添加选项事件
+				// this.$emit('update:value', itemValue); // 设置值为新增的选项
+			} catch (error) {
+				throw Error(error);
+			}
+		},
+		combinationFooterWithOptions(options) {
+			let _options = [];
+			if (!isEmpty(this.footerConfig)) {
+				this.footerConfig.map((item) => {
+					_options.push({
+						value: `__DEFAULT__${item.key.toUpperCase()}__`,
+						label: item.label,
+						icon: item.icon,
+						disabled: true,
+						__origin__: item
+					})
+				})
+			}
+
+			this.renderOptions = [...options, ..._options];
+		}
+	},
+	render(h) {
+		const { className, options, value, cascaderConfig, asyncLoadMethod, defaultOption } = this.$props;
+		const _this = this;
+
+		// 如果未定义延迟加载数据，则默认使用 options 选项
+		if (isUndefined(asyncLoadMethod) && isEmpty(this.renderOptions)) {
+			this.combinationFooterWithOptions(options);
+		}
+
+		return h('div', { class: !className ? "w-full" : typeof className === 'string' ? ['w-full', className] : ['w-full', ...className], }, [
+			h('el-cascader', {
+				ref: this.refName,
+				props: {
+					options: isEmpty(this.renderOptions) ? isEmpty(defaultOption) ? [] : (isArray(defaultOption) ? defaultOption : [defaultOption]) : this.renderOptions,
+					...cascaderConfig
+				},
+				attrs: {
+					value,
+					id: this.refName,
+				},
+				on: {
+					// 类似 v-model 效果, props.value + @input = v-model
+					input: function(v) {
+						_this.$emit('update:value', v)
+					},
+					change: function(v) {
+						_this.$emit('change', v)
+					},
+					"remove-tag": function(v) {
+						_this.$emit('remove-tag', v)
+					},
+					"visible-change": async function(status) {
+						// 当第一次打开下拉框时，已定义方法，则获取数据
+						if (status && !_this.hasLoaded && !isUndefined(asyncLoadMethod) && (!isEmpty(defaultOption) || isEmpty(_this.renderOptions))) {
+							const list = await asyncLoadMethod();
+							_this.combinationFooterWithOptions(list);
+							_this.hasLoaded = true;
+						}
+						_this.$emit('visible-change', status)
+					}
+				},
+				scopedSlots: {
+					default: (item) => {
+						// eslint-disable-next-line no-unused-vars
+						const { node, data } = item;
+
+						if ((isString(data.value) && data.value.indexOf('__DEFAULT__') !== -1)) {
+							return h('div', {
+								class: 'w-full text-theme-primary font-bold cursor-pointer'
+							}, [
+								h('i', { class: [data.icon, 'mr-2'] }),
+								h('span', {
+									on: {
+										click: function() {
+											_this.handleFooterItemClick(data.__origin__);
+										}
+									}
+								}, data.label)
+							])
+						} else {
+							return h('span', {}, data.label)
+						}
+					}
+				},
+				class: 'w-full'
+			}, null),
+			_this.dialogConfig.status ? h("lwc-dialog-form", {
+				props: {
+					status: _this.dialogConfig.status,
+					contentConfig: _this.dialogConfig.itemRender,
+					..._this.dialogConfig.props
+				},
+				attrs: { transfer: true, ..._this.dialogConfig.attrs },
+				on: {
+					"update:status": (val) => (_this.dialogConfig.status = val),
+					afterSubmit: ({ req, res }) => {
+						_this.handleDialogFormCallback(req, res);
+					},
+				},
+			}) : null,
+		]);
+	}
+}
+

src/stories/select/extend/index.stories.js

@@ -71,7 +71,7 @@ const asyncMockOptions = async (newItem) => {
 	return new Promise((resolve) => {
 		setTimeout(() => {
 			if (newItem) {
-				resolve([newItem, ...mockOptions])
+				resolve([{ ...newItem, children: [] }, ...mockOptions])
 			} else {
 				resolve(mockOptions);
 			}

src/stories/select/extend/src/index.js

@@ -290,7 +290,7 @@ export default {
 	},
 	data() {
 		return {
-			renderOptions: [], // 选项项
+			renderOptions: [], // 选项
 			searchLoading: false, // 搜索加载状态
 			filteredOptionsCount: 0, // 筛选后的选项数量
 			filteredOptions: [], // 筛选后的选项
@@ -333,9 +333,13 @@ export default {
 					}
 				},
 				on: {
-					change: function(v) {
+					// 类似 v-model 效果, props.value + @input = v-model
+					input: function(v) {
 						_this.$emit('update:value', v)
 					},
+					change: function(v) {
+						_this.$emit('change', v)
+					},
 					"visible-change": async function(status) {
 						// 当第一次打开下拉框时，已定义方法，则获取数据
 						if (status && !isUndefined(asyncLoadMethod) && isEmpty(_this.renderOptions) && !selectConfig.remote) {

storybook-static/iframe.html

-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-preparing-story) > .sb-preparing-story,
-  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
-  :not(.sb-show-nopreview) > .sb-nopreview,
-  :not(.sb-show-errordisplay) > .sb-errordisplay {
-    display: none;
-  }
-
-  .sb-show-main.sb-main-centered {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    min-height: 100vh;
-  }
-
-  .sb-show-main.sb-main-centered #root {
-    box-sizing: border-box;
-    margin: auto;
-    padding: 1rem;
-    max-height: 100%; /* Hack for centering correctly in IE11 */
-  }
-
-  /* Vertical centering fix for IE11 */
-  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    .sb-show-main.sb-main-centered:after {
-      content: '';
-      min-height: inherit;
-      font-size: 0;
-    }
-  }
-
-  .sb-show-main.sb-main-fullscreen {
-    margin: 0;
-    padding: 0;
-    display: block;
-  }
-
-  .sb-show-main.sb-main-padded {
-    margin: 0;
-    padding: 1rem;
-    display: block;
-    box-sizing: border-box;
-  }
-
-  .sb-wrapper {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 20px;
-    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
-      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    overflow: auto;
-  }
-
-  .sb-heading {
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: 0.2px;
-    margin: 10px 0;
-    padding-right: 25px;
-  }
-
-  .sb-nopreview {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-  }
-
-  .sb-nopreview_main {
-    margin: auto;
-    padding: 30px;
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.03);
-  }
-
-  .sb-nopreview_heading {
-    text-align: center;
-  }
-
-  .sb-errordisplay {
-    border: 20px solid rgb(187, 49, 49);
-    background: #222;
-    color: #fff;
-    z-index: 999999;
-  }
-
-  .sb-errordisplay_code {
-    padding: 10px;
-    background: #000;
-    color: #eee;
-    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
-      'Lucida Console', Consolas, Monaco, monospace;
-  }
-
-  .sb-errordisplay pre {
-    white-space: pre-wrap;
-  }
-
-  @-webkit-keyframes sb-rotate360 {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes sb-rotate360 {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @-webkit-keyframes sb-glow {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.4;
-    }
-  }
-  @keyframes sb-glow {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.4;
-    }
-  }
-
-  /* We display the preparing loaders *over* the rendering story */
-  .sb-preparing-story,
-  .sb-preparing-docs {
-    background-color: white;
-  }
-
-  .sb-loader {
-    -webkit-animation: sb-rotate360 0.7s linear infinite;
-    animation: sb-rotate360 0.7s linear infinite;
-    border-color: rgba(97, 97, 97, 0.29);
-    border-radius: 50%;
-    border-style: solid;
-    border-top-color: #646464;
-    border-width: 2px;
-    display: inline-block;
-    height: 32px;
-    left: 50%;
-    margin-left: -16px;
-    margin-top: -16px;
-    mix-blend-mode: difference;
-    overflow: hidden;
-    position: absolute;
-    top: 50%;
-    transition: all 200ms ease-out;
-    vertical-align: top;
-    width: 32px;
-    z-index: 4;
-  }
-
-  .sb-previewBlock {
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
-    margin: 25px auto 40px;
-    max-width: 600px;
-  }
-
-  .sb-previewBlock_header {
-    align-items: center;
-    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
-    display: flex;
-    gap: 14px;
-    height: 40px;
-    padding: 0 12px;
-  }
-
-  .sb-previewBlock_icon {
-    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
-    animation: sb-glow 1.5s ease-in-out infinite;
-    background: #e6e6e6;
-    height: 14px;
-    width: 14px;
-  }
-  .sb-previewBlock_icon:last-child {
-    margin-left: auto;
-  }
-
-  .sb-previewBlock_body {
-    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
-    animation: sb-glow 1.5s ease-in-out infinite;
-    height: 182px;
-    position: relative;
-  }
-
-  .sb-argstableBlock {
-    border-collapse: collapse;
-    border-spacing: 0;
-    font-size: 13px;
-    line-height: 20px;
-    margin: 25px auto 40px;
-    max-width: 600px;
-    text-align: left;
-    width: 100%;
-  }
-  .sb-argstableBlock th:first-of-type,
-  .sb-argstableBlock td:first-of-type {
-    padding-left: 20px;
-  }
-  .sb-argstableBlock th:nth-of-type(2),
-  .sb-argstableBlock td:nth-of-type(2) {
-    width: 35%;
-  }
-  .sb-argstableBlock th:nth-of-type(3),
-  .sb-argstableBlock td:nth-of-type(3) {
-    width: 15%;
-  }
-  .sb-argstableBlock th:laste-of-type,
-  .sb-argstableBlock td:laste-of-type {
-    width: 25%;
-    padding-right: 20px;
-  }
-  .sb-argstableBlock th span,
-  .sb-argstableBlock td span {
-    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
-    animation: sb-glow 1.5s ease-in-out infinite;
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 0;
-    box-shadow: none;
-    color: transparent;
-  }
-  .sb-argstableBlock th {
-    padding: 10px 15px;
-  }
-
-  .sb-argstableBlock-body {
-    border-radius: 4px;
-    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
-  }
-  .sb-argstableBlock-body tr {
-    background: transparent;
-    overflow: hidden;
-  }
-  .sb-argstableBlock-body tr:not(:first-child) {
-    border-top: 1px solid #e6e6e6;
-  }
-  .sb-argstableBlock-body tr:first-child td:first-child {
-    border-top-left-radius: 4px;
-  }
-  .sb-argstableBlock-body tr:first-child td:last-child {
-    border-top-right-radius: 4px;
-  }
-  .sb-argstableBlock-body tr:last-child td:first-child {
-    border-bottom-left-radius: 4px;
-  }
-  .sb-argstableBlock-body tr:last-child td:last-child {
-    border-bottom-right-radius: 4px;
-  }
-  .sb-argstableBlock-body td {
-    background: #fff;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    vertical-align: top;
-  }
-  .sb-argstableBlock-body td:not(:first-of-type) {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-  .sb-argstableBlock-body button {
-    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
-    animation: sb-glow 1.5s ease-in-out infinite;
-    background-color: rgba(0, 0, 0, 0.1);
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    color: transparent;
-    display: inline;
-    font-size: 12px;
-    line-height: 1;
-    padding: 10px 16px;
-  }
-
-  .sb-argstableBlock-summary {
-    margin-top: 4px;
-  }
-
-  .sb-argstableBlock-code {
-    margin-right: 4px;
-    margin-bottom: 4px;
-    padding: 2px 5px;
-  }</style><script>/* globals window */
-  /* eslint-disable no-underscore-dangle */
-  try {
-    if (window.top !== window) {
-      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.warn('unable to connect to top frame for connecting dev tools');
-  }
-
-  window.onerror = function onerror(message, source, line, column, err) {
-    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
-    // eslint-disable-next-line no-var, vars-on-top
-    var xhr = new window.XMLHttpRequest();
-    xhr.open('POST', '/runtime-error');
-    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    xhr.send(
-      JSON.stringify({
-        /* eslint-disable object-shorthand */
-        message: message,
-        source: source,
-        line: line,
-        column: column,
-        error: err && { message: err.message, name: err.name, stack: err.stack },
-        origin: 'preview',
-        /* eslint-enable object-shorthand */
-      })
-    );
-  };</script><script src="//unpkg.com/echarts"></script><style>#root[hidden],
-      #docs-root[hidden] {
-        display: none !important;
-      }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
-          
-      
-          
-            window['LOGLEVEL'] = "info";
-          
-      
-          
-            window['FRAMEWORK_OPTIONS'] = {};
-          
-      
-          
-      
-          
-            window['FEATURES'] = {"postcss":true,"emotionAlias":true,"warnOnLegacyHierarchySeparator":true};
-          
-      
-          
-      
-          
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0d59c2a8.iframe.bundle.js"></script><script src="624.58372a83.iframe.bundle.js"></script><script src="main.4a37d3dd.iframe.bundle.js"></script></body></html>
\ No newline at end of file

storybook-static/index.html

-<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body {
-    overflow: hidden;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  * {
-    box-sizing: border-box;
-  }</style><script>/* globals window */
-  /* eslint-disable no-underscore-dangle */
-  try {
-    if (window.top !== window) {
-      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.warn('unable to connect to top frame for connecting dev tools');
-  }
-
-  window.onerror = function onerror(message, source, line, column, err) {
-    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
-    // eslint-disable-next-line no-var, vars-on-top
-    var xhr = new window.XMLHttpRequest();
-    xhr.open('POST', '/runtime-error');
-    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    xhr.send(
-      JSON.stringify({
-        /* eslint-disable object-shorthand */
-        message: message,
-        source: source,
-        line: line,
-        column: column,
-        error: err && { message: err.message, name: err.name, stack: err.stack },
-        origin: 'manager',
-        /* eslint-enable object-shorthand */
-      })
-    );
-  };</script><style>#root[hidden],
-      #docs-root[hidden] {
-        display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
-          
-      
-          
-            window['LOGLEVEL'] = "info";
-          
-      
-          
-            window['FEATURES'] = {"postcss":true,"emotionAlias":true,"warnOnLegacyHierarchySeparator":true};
-          
-      
-          
-      
-          
-      
-          
-            window['DOCS_MODE'] = false;</script><script src="runtime~main.1465c52e7ac2c2b63c77.manager.bundle.js"></script><script src="478.016cfff0fa8fe64f6734.manager.bundle.js"></script><script src="main.b1902d384aeb1343babd.manager.bundle.js"></script></body></html>
\ No newline at end of file