1 | # DropDownButton 使用说明
|
2 |
|
3 | ## 项目运行
|
4 |
|
5 | 1. cnpm install 或 npm install cnpm使用教程
|
6 |
|
7 | 2. npm run dev (开发环境打包 port:8080)
|
8 |
|
9 | 3. npm run test (测试用例)
|
10 |
|
11 | 4. npm run build (生产环境打包)
|
12 |
|
13 | ## DropDownButton参数
|
14 |
|
15 | ```javascript
|
16 | {
|
17 |
|
18 | /** 下拉按钮上的文字 */
|
19 | title: '测试测试测试',
|
20 |
|
21 | /** 下拉按钮上的文字类型 是文本,还是icon */
|
22 | type: 'text',
|
23 |
|
24 | /** 当type为“text”时可选,true为有图标,false为没有 */
|
25 | textIcon: true,
|
26 |
|
27 | /**按钮尺寸(string)。参数:
|
28 | 1.默认:“default”
|
29 | 2.小按钮:“small”
|
30 | */
|
31 | bsSize: 'default',
|
32 |
|
33 | /**按钮类型(string)。参数:
|
34 | 1.默认:者'default'
|
35 | 2.弱化按钮:'weaken'
|
36 | */
|
37 | bsStyle: 'weaken',
|
38 |
|
39 | /** 采用非Button样式,默认为true */
|
40 | isBtnStyle: false,
|
41 |
|
42 | /** 水平向左偏移的值,为负数则向右偏移 */
|
43 | deviationLeft: 140,
|
44 |
|
45 | /** 自定义下拉弹层宽度,默认170 */
|
46 | panelWidth: '137px',
|
47 |
|
48 | /** 自定义弹层居左还是居右,默认false 居左 */
|
49 | rightAlign: true,
|
50 |
|
51 | /** MenuItem **/
|
52 | children: [{
|
53 | "value": 0,
|
54 | "text": '查看详情查看详情查看详情查看详情',
|
55 | "active": false,
|
56 | "isChecked": false,
|
57 | "isDisabled": true
|
58 | }, {
|
59 | "value": 1,
|
60 | "text": '性质维度',
|
61 | "active": false,
|
62 | "isChecked": false,
|
63 | "isDisabled": false
|
64 | }],
|
65 |
|
66 | /** is open or not 首次渲染列表是否已展开**/
|
67 | open: false,
|
68 |
|
69 | /** 是否禁用 */
|
70 | disabled: false, //
|
71 |
|
72 |
|
73 | /** 是否显示按钮 */
|
74 | hidden: false, //
|
75 |
|
76 | /** icon图标 */
|
77 | iconName: 'pc-sys-dropdownmin-nomal-svg', //
|
78 |
|
79 | /** icon图标 */
|
80 | activeName: 'pc-sys-dropdownmin-active-svg', //
|
81 |
|
82 | /** 最大宽度,默认为'' ,超出后,超出的部分显示... ,仅对文本模式有用 */
|
83 | maxWidth: '', //
|
84 |
|
85 | /** 下拉菜单自适应位置 */
|
86 | autoDirection: true, //
|
87 |
|
88 | /** MenuList spread direction, one of:
|
89 | 1."left-top"
|
90 | 2."right-top"
|
91 | 3."left-down"
|
92 | 4."right-down"
|
93 | */
|
94 | direction: 'left-down',
|
95 |
|
96 | itemClick: function (retFun) {
|
97 | let promise = new Promise(function (resolve, reject) {
|
98 | //发送请求 获得数据 //成功走下面
|
99 | resolve([{
|
100 | value: 0,
|
101 | text: '查看详情',
|
102 | active: false,
|
103 | isChecked: false
|
104 | }]);
|
105 | //失败了 reject()
|
106 | });
|
107 |
|
108 | promise.then(function (data) {
|
109 | retFun(data)
|
110 | })
|
111 | },
|
112 |
|
113 | /** 点击后时间回调 */
|
114 | onClick: function (value, target, onClick, btnInfo) {]
|
115 | console.log(value); //输出val
|
116 | console.log(target); //输出e
|
117 | console.log(onClick); //输出true
|
118 | console.log(btnInfo); //输出this.state
|
119 | }
|
120 | }
|
121 | ```
|
122 |
|
123 | ## DropDownButton调用方法
|
124 |
|
125 | 1.安装npm组件包
|
126 |
|
127 | ```
|
128 | npm install @beisen/dropdown-button --save-dev
|
129 | ```
|
130 |
|
131 | 2.引用组件
|
132 |
|
133 | ```javascript
|
134 | import DropDownButton from "@beisen/dropdown-button"
|
135 | ```
|
136 |
|
137 | 3.传入参数
|
138 |
|
139 | 该参数为上述参数,传入方式使用: {...参数}
|
140 | ```javascript
|
141 | {
|
142 | "title":"测试" //下拉按钮上的文字
|
143 | ,"type":"icon" //下拉按钮上的文字类型 是文本,还是icon
|
144 | ,"bsSize":"default" /**按钮尺寸(string)。参数:
|
145 | 1.默认:“default”
|
146 | 2.小按钮:“small”
|
147 | **/
|
148 | ,"bsStyle":"default" /**按钮类型(string)。参数:
|
149 | 1.默认:者“default”
|
150 | 2.弱化按钮:“weaken”
|
151 | **/
|
152 | ,"children":[
|
153 | {
|
154 | "value":0
|
155 | ,"text":"查看详情"
|
156 | ,"active":false
|
157 | ,"isChecked":false
|
158 | }
|
159 | ,{
|
160 | "value":1
|
161 | ,"text":"性质维度"
|
162 | ,"active":false
|
163 | ,"isChecked":false
|
164 | }
|
165 | ,{
|
166 | "value":2
|
167 | ,"text":"地域维度"
|
168 | ,"active":false
|
169 | ,"isChecked":false
|
170 | }
|
171 | ,{
|
172 | "value":3
|
173 | ,"text":"包含下属"
|
174 | ,"active":false
|
175 | ,"isChecked":true
|
176 | }
|
177 | ,{
|
178 | "value":4
|
179 | ,"text":"不包含下属"
|
180 | ,"active":false
|
181 | ,"isChecked":false
|
182 | }
|
183 | ] /** MenuItem **/
|
184 | ,"open":false /** is open or not 首次渲染列表是否已展开**/
|
185 | ,"disabled":false //是否禁用
|
186 | ,"hidden":false //是否显示按钮
|
187 | ,"iconName":"pc-sys-arrowdown-nomal-svg" //icon图标
|
188 | ,"maxWidth":"20px" //最大宽度,默认为"" ,超出后,超出的部门显示...
|
189 | ,"autoDirection":false //下拉菜单自适应位置 默认为自适应
|
190 | ,"direction":"right-down" /**
|
191 | MenuList spread direction,one of:
|
192 | 1."left-top"
|
193 | 2."right-top"
|
194 | 3."left-down"
|
195 | 4."right-down"
|
196 | **/
|
197 | ,"onClick": function(value,target,onClick,btnInfo, btn) {
|
198 | console.log(value); //输出val
|
199 | console.log(target); //输出e
|
200 | console.log(onClick); //输出true
|
201 | console.log(btnInfo); //输出this.state
|
202 | console.log(btn) // 按钮节点
|
203 | } /**点击后时间回调**/
|
204 | }
|
205 |
|
206 | render () {
|
207 | return (
|
208 | <DropDownButton {...this.state} />
|
209 | )
|
210 | }
|
211 | ``` |
\ | No newline at end of file |