@blueking/date-picker 0.0.1 → 0.0.3
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/README.md +71 -6
- package/dist/vue3-full.esm.js +26323 -33206
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,12 +1,77 @@
|
|
|
1
1
|
|
|
2
2
|
<br/>
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
### 支持 Vue2/Vue3 版本 无差别使用
|
|
5
|
+
|
|
6
|
+
#### 安装
|
|
7
|
+
```bash
|
|
8
|
+
npm i @blueking/date-picker
|
|
9
|
+
```
|
|
10
|
+
#### 使用
|
|
11
|
+
- vue3框架下使用
|
|
12
|
+
```javascript
|
|
13
|
+
<template>
|
|
14
|
+
<div class="app">
|
|
15
|
+
<DatePicker
|
|
16
|
+
v-model="value"
|
|
17
|
+
v-model:timezone="timezone"
|
|
18
|
+
format="YYYY-MM-DD HH:mm:ss"
|
|
19
|
+
:behavior="'normal'"
|
|
20
|
+
:version="2"
|
|
21
|
+
:disabled="false"
|
|
22
|
+
@update:model-value="handleValueChange"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { ref } from 'vue';
|
|
5
28
|
|
|
6
|
-
|
|
29
|
+
import DatePicker from '@blueking/date-picker';
|
|
7
30
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
31
|
+
// 如果项目已安装bkui-vue 则可使用轻量版本
|
|
32
|
+
import DatePicker from '@blueking/date-picker/dist/vue3-light';
|
|
33
|
+
import '@blueking/date-picker/dist/vue3-light.css';
|
|
34
|
+
|
|
35
|
+
const value = ref(['now-2d/d', 'now',]);
|
|
36
|
+
const timezone = ref('Asia/Shanghai');
|
|
37
|
+
const handleValueChange = (value: any, info: any) => {
|
|
38
|
+
console.log(value, info);
|
|
39
|
+
};
|
|
40
|
+
</script>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
- vue2框架下使用
|
|
44
|
+
```javascript
|
|
45
|
+
<template>
|
|
46
|
+
<div class="app">
|
|
47
|
+
<DatePicker
|
|
48
|
+
:modelValue="value"
|
|
49
|
+
:timezone="timezone"
|
|
50
|
+
format="YYYY-MM-DD HH:mm:ss"
|
|
51
|
+
:behavior="'normal'"
|
|
52
|
+
:version="2"
|
|
53
|
+
:disabled="false"
|
|
54
|
+
@update:model-value="handleValueChange"
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
57
|
+
</template>
|
|
58
|
+
<script lang="ts">
|
|
59
|
+
|
|
60
|
+
import DatePicker from '@blueking/date-picker/dist/vue2-full';
|
|
61
|
+
import '@blueking/date-picker/dist/vue2-full.css'
|
|
62
|
+
|
|
63
|
+
export default {
|
|
64
|
+
data() {
|
|
65
|
+
return {
|
|
66
|
+
value: ['now-2d/d', 'now',],
|
|
67
|
+
timezone: ''
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
methods: {
|
|
71
|
+
handleValueChange(value, info) {
|
|
72
|
+
console.log(value, info);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
</script>
|
|
11
77
|
```
|
|
12
|
-
|