feat: select组件初始化

devui/select/demo/demo-basic.tsx

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue'
+import DSelect from '../select'
+
+export default defineComponent({
+ name: 'DSelectDemo',
+ setup() {
+ return () => {
+ return (
+ <>
+ <DSelect />
+ </>
+ )
+ }
+ }
+})

devui/select/demo/select-demo.tsx

@@ -1,12 +1,18 @@
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
+import { useDemo } from 'hooks/use-demo';
+import DemoBasic from './demo-basic';
+import DemoBasicCode from './demo-basic?raw';
 
 export default defineComponent({
- name: 'd-select-demo',
- props: {
- },
- setup(props, ctx) {
- return () => {
- return <div>devui-select-demo</div>
- }
+ name: 'DTextInputDemo',
+ render () {
+ return useDemo([
+ {
+ id: 'demo-basic',
+ title: '基本用法',
+ code: DemoBasicCode,
+ content: <DemoBasic></DemoBasic>
+ }
+ ]);
  }
-})
+});

devui/select/select.scss

@@ -0,0 +1,20 @@
+@import '../style/mixins/index';
+@import '../style/theme/color';
+@import '../style/theme/corner';
+
+.devui-select {
+ position: relative;
+ width: 100%;
+}
+
+.devui-select-dropdown {
+ position: absolute;
+ max-height: 200px;
+ overflow: auto;
+ top: 100%;
+ left: 0;
+ margin: 5px 0;
+ border-radius: 2px;
+ background: #ffffff;
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+}

devui/select/select.tsx

@@ -1,13 +1,28 @@
 
+import './select.scss'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
- name: 'd-select',
- props: {
- },
- setup(props, ctx) {
+ name: 'DSelect',
+ setup() {
  return () => {
- return <div>devui-select</div>
+ return (
+ <div class="devui-select">
+ <div class="devui-select-selection">
+ <input
+ {...{dtextinput: true}}
+ type="text"
+ class="devui-select-input"
+ />
+ </div>
+ <div class="devui-select-dropdown">
+ <ul class="devui-select-dropdown-list">
+ <li class="devui-select-item">试试</li>
+ <li class="devui-select-item">试试</li>
+ </ul>
+ </div>
+ </div>
+ )
  }
  }
 })