@anji2025/aj-select 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/babel.config.js +14 -0
- package/dist/aj-select.common.js +26606 -0
- package/dist/aj-select.common.js.map +1 -0
- package/dist/aj-select.umd.js +26617 -0
- package/dist/aj-select.umd.js.map +1 -0
- package/dist/aj-select.umd.min.js +10 -0
- package/dist/aj-select.umd.min.js.map +1 -0
- package/dist/demo.html +1 -0
- package/examples/App.vue +95 -0
- package/examples/main.js +32 -0
- package/install.js +7 -0
- package/package.json +37 -0
- package/packages/select.vue +1068 -0
- package/packages/util.js +457 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +13 -0
- package/vue.config.js +33 -0
package/dist/demo.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<!doctype html><meta charset="utf-8"><title>aj-select demo</title><script src="./aj-select.umd.js"></script><script>console.log(aj-select)</script>
|
package/examples/App.vue
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<Button @click="onClick">点击切换-{{isMultiple}}</Button>
|
|
4
|
+
<div>{{selectValue}}-{{isMultiple}}</div>
|
|
5
|
+
<AjSelect v-model="selectValue" @change="selectChange" filterable clearable :multiple="isMultiple" :isSearchPinYin="false" :optionList="optionList" style="width: 200px" >
|
|
6
|
+
<div slot="prefixText" slot-scope="{data}">{{data&&data.title}}</div>
|
|
7
|
+
<div slot="optionSlot" slot-scope="{data}">
|
|
8
|
+
<span style="color: #888; margin-right: 10px;">[测试]222</span>{{data.title}}<span style="float:right;">{{data.id}}</span>
|
|
9
|
+
</div>
|
|
10
|
+
</AjSelect>
|
|
11
|
+
<div>{{selectValue2}} ===2</div>
|
|
12
|
+
<AjSelect :value.sync="selectValue2" @change="selectChange" filterable clearable multiple collapse-tags collapseTagsRow :optionList="optionList2" :isValueProps="true" :valueProps='["value", "title"]' :optionProps="optionProps" style="width: 300px" />
|
|
13
|
+
<div>{{selectValue6}}</div>
|
|
14
|
+
<AjSelect :value.sync="selectValue6" @change="selectChange" filterable clearable collapse-tags collapseTagsRow :optionList="optionList2" :optionProps="optionProps" style="width: 300px" />
|
|
15
|
+
<div>{{selectValue3}}</div>
|
|
16
|
+
<AjSelect v-model="selectValue3" @change="selectChange" filterable clearable multiple :labelInValue="false" collapseTags :optionList="optionList" style="width: 300px" />
|
|
17
|
+
<div>{{selectValue4}}</div>
|
|
18
|
+
<AjSelect v-model="selectValue4" @change="selectChange" filterable clearable :labelInValue="false" :multiple="true" noSelectOptionText="该组件已删除" collapseTags :optionList="optionListAll" style="width: 300px" />
|
|
19
|
+
<div>{{selectValue5}}</div>
|
|
20
|
+
<AjSelect v-model="selectValue5" @change="selectChange" filterable clearable :multiple="true" :isSearchPinYin="false" :optionList="optionListAll" style="width: 300px" />
|
|
21
|
+
<div @click="type=!type">------</div>
|
|
22
|
+
{{type}}
|
|
23
|
+
<AjSelect v-model="selectValue5" @change="selectChange" filterable clearable :multiple="true" :isSearchPinYin="false" :optionList="type?optionListAll:optionList" style="width: 200px" />
|
|
24
|
+
<AjSelect v-model="selectValue5" @change="selectChange" filterable clearable :multiple="true" :isSearchPinYin="false" :optionList="type?optionListAll:optionListAll2" style="width: 300px" />
|
|
25
|
+
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
export default {
|
|
31
|
+
name: 'App',
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
isMultiple: false,
|
|
35
|
+
selectValue: null,
|
|
36
|
+
selectValue3: [2],
|
|
37
|
+
selectValue2: [{value: 2, title: '测试2'}],
|
|
38
|
+
selectValue6: {value: 22, title: '测试22'},
|
|
39
|
+
selectValue4: [20, 21],
|
|
40
|
+
selectValue5: [ { "id": 20, "title": "测试19" }],
|
|
41
|
+
optionList: [{id:1, title: '测试1'}, {id:2, title: '测试2', disabled: true, isHide: true}, {id:3, title: '测试3'}, {id: 4, title: '测试4', isHide: true},],
|
|
42
|
+
optionList4: [{id:4, title: '测试11'}, {id:2, title: '测试2', disabled: true, isHide: true}, {id:3, title: '测试3'}],
|
|
43
|
+
optionList3: [],
|
|
44
|
+
optionProps: {value: "value", label: "title"},
|
|
45
|
+
valueProps: ["value", "title"],
|
|
46
|
+
type: false,
|
|
47
|
+
optionList2: [{value:1, title: '测试1', padding: '2px', background: 'yellow'}, {value:2, title: '测试2', padding: '2px', background: 'yellow', disabled: true}, {value:3, title: '测试3', padding: '2px', background: 'yellow'}, {value:4, title: '测试4', padding: '2px', background: 'yellow'}, {value:5, title: '测试5', padding: '2px', background: 'yellow'},],
|
|
48
|
+
optionMap: [{value: undefined, id: 1},{value: undefined, id: 2},{value: undefined, id: 3},{value: undefined, id: 1},],
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
mounted() {
|
|
52
|
+
// this.optionList2.push({value:44, title: '测试44'});
|
|
53
|
+
// setTimeout(()=>{
|
|
54
|
+
// this.optionList3 = [...this.optionList]
|
|
55
|
+
// }, 500)
|
|
56
|
+
},
|
|
57
|
+
computed: {
|
|
58
|
+
optionListAll() {
|
|
59
|
+
let array = [];
|
|
60
|
+
for (let i = 0; i < 100; i++) {
|
|
61
|
+
array.push({id: i+1, title: '测试'+i });
|
|
62
|
+
}
|
|
63
|
+
return array;
|
|
64
|
+
},
|
|
65
|
+
optionListAll2() {
|
|
66
|
+
let array = [];
|
|
67
|
+
for (let i = 0; i < 100; i++) {
|
|
68
|
+
array.push({id: 'i'+i+1, title: 'i测试'+i });
|
|
69
|
+
}
|
|
70
|
+
return array;
|
|
71
|
+
},
|
|
72
|
+
optionMapList() {
|
|
73
|
+
return {
|
|
74
|
+
1: this.optionList,
|
|
75
|
+
2: this.optionList2,
|
|
76
|
+
3: this.optionListAll,
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
methods: {
|
|
81
|
+
selectChange(val){
|
|
82
|
+
console.log('change', val);
|
|
83
|
+
},
|
|
84
|
+
onClick(){
|
|
85
|
+
this.isMultiple=!this.isMultiple;
|
|
86
|
+
if(this.isMultiple)
|
|
87
|
+
this.selectValue=[];
|
|
88
|
+
else
|
|
89
|
+
this.selectValue={};
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
}
|
|
93
|
+
</script>
|
|
94
|
+
<style>
|
|
95
|
+
</style>
|
package/examples/main.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import Vue from "vue";
|
|
2
|
+
import {
|
|
3
|
+
Select,
|
|
4
|
+
Option,
|
|
5
|
+
Checkbox,
|
|
6
|
+
CheckboxGroup,
|
|
7
|
+
Input,
|
|
8
|
+
Button,
|
|
9
|
+
Tag,
|
|
10
|
+
InfiniteScroll,
|
|
11
|
+
Progress,
|
|
12
|
+
} from "element-ui";
|
|
13
|
+
import "element-ui/lib/theme-chalk/index.css";
|
|
14
|
+
import App from "./App.vue";
|
|
15
|
+
|
|
16
|
+
Vue.component("Input", Input);
|
|
17
|
+
Vue.component("Button", Button);
|
|
18
|
+
Vue.component("Select", Select);
|
|
19
|
+
Vue.component("Option", Option);
|
|
20
|
+
Vue.component("Checkbox", Checkbox);
|
|
21
|
+
Vue.component("CheckboxGroup", CheckboxGroup);
|
|
22
|
+
Vue.component("Input", Input);
|
|
23
|
+
Vue.component("Tag", Tag);
|
|
24
|
+
Vue.component("Progress", Progress);
|
|
25
|
+
Vue.use(InfiniteScroll);
|
|
26
|
+
|
|
27
|
+
import MyUI from "../install";
|
|
28
|
+
Vue.use(MyUI);
|
|
29
|
+
|
|
30
|
+
new Vue({
|
|
31
|
+
render: (h) => h(App),
|
|
32
|
+
}).$mount("#app");
|
package/install.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@anji2025/aj-select",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "下拉选择框",
|
|
5
|
+
"private": false,
|
|
6
|
+
"main": "dist/nk-select.umd.js",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public",
|
|
9
|
+
"registry": "https://registry.npmjs.org/"
|
|
10
|
+
},
|
|
11
|
+
"author": "anji2025",
|
|
12
|
+
"license": "ISC",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"start": "vue-cli-service serve --mode dev",
|
|
15
|
+
"serve": "vue-cli-service serve",
|
|
16
|
+
"build-lib": "vue-cli-service build --target lib ./install.js"
|
|
17
|
+
},
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@babel/preset-env": "^7.19.4",
|
|
20
|
+
"@logicflow/core": "^1.1.20",
|
|
21
|
+
"@logicflow/extension": "^1.1.20",
|
|
22
|
+
"babel-plugin-component": "^1.1.1",
|
|
23
|
+
"core-js": "^3.6.5",
|
|
24
|
+
"element-ui": "^2.12.0",
|
|
25
|
+
"lodash": "^4.17.20",
|
|
26
|
+
"pinyin": "^4.0.0",
|
|
27
|
+
"sass": "^1.93.2",
|
|
28
|
+
"sass-loader": "^16.0.5",
|
|
29
|
+
"vue": "^2.6.11"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@babel/core": "^7.12.16",
|
|
33
|
+
"@vue/cli-plugin-babel": "~5.0.0",
|
|
34
|
+
"@vue/cli-service": "~5.0.0",
|
|
35
|
+
"vue-template-compiler": "^2.6.14"
|
|
36
|
+
}
|
|
37
|
+
}
|