rooki-element

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

按钮 按钮 按钮 按钮 按钮 按钮 按钮 按钮 按钮 <script setup lang="ts"> import '@/assets/font/iconfont.css' </script> <style scoped> </style>

<!-- 单选框group的使用 -->
<Rooki-CheckBox-Group v-model:modelValue="checkedValues" @change="changeValue">
</Rooki-CheckBox-Group>

<script lang="ts" setup> import { ref } from 'vue' const checkedValues = ref([ { label: 'Option 1', value: 'Option 1', checked: true }, { label: 'Option 2', value: 'Option 2', checked: false }, { label: 'Option 3', value: 'Option 3', checked: true }, { label: 'Option 4', value: 'Option 4', checked: false, disabled: true } ])

const changeValue = (value: Array) => { console.log(value) }

const updateValue = (changeTarget: { value: string; checked: boolean }) => { console.log(changeTarget) } </script>

默认插槽位置

footer插槽位置

打开dialog <script setup lang="ts"> import { ref } from 'vue' const visiable = ref(false) const openDialog = () => { visiable.value = true } const closeVisiable = (value: boolean) => { visiable.value = value } </script> <style scoped> </style> 按钮插槽占用 <script setup lang="ts"> import { ref } from 'vue' const model = ref({ name: '12312', account: 1231, password: 123123, sex: '男', hobby: ['篮球', '足球'], info: '' }) const getForm = () => { console.log(model.value) } const handInput = (value: string) => { model.value.name = value } </script> <style scoped> </style>
<script setup lang="ts"> import { ref } from 'vue' const inputValue = ref('') const inputValue2 = ref('') const inputValue3 = ref('') const getInputValue = (value: string) => { console.log(value) inputValue.value = value } const getInputValue2 = (value: string) => { console.log(value) inputValue2.value = value } </script> <script setup lang="ts"> import { ref } from 'vue' const value = ref('单选框1') const valueGroup = ref([ { label: '1', value: 1, name: '1' }, { label: '2', value: 2, name: '2' }, { label: '3', value: 3, name: '3' } ]) const changeValue = (changeTarget: { value: [String, Number]; checked: boolean }) => { console.log(changeTarget) } const changeValue2 = (changeTarget: { value: [String, Number]; checked: boolean }) => { console.log(changeTarget) } </script> <style scoped> </style> <script setup lang="ts"> import { ref } from 'vue' const valueSwitch = ref(false) const changeSwitch = (value: boolean) => { valueSwitch.value = value if (value) { console.log('开关打开，操作你的吧！') } else { console.log('开关关了') } } </script> <style scoped> </style>

import RookiButton from './components/Rooki-Button.vue' import RookiCheckBox from './components/Rooki-CheckBox.vue' import RookiCheckBoxGroup from './components/Rooki-CheckBox-Group.vue' import RookiDialog from './components/Rooki-Dialog.vue' import RookiForm from './components/Rooki-Form.vue' import RookiFormItem from './components/Rooki-Form-Item.vue' import RookiInput from './components/Rooki-input.vue' import RookiRadioGroup from './components/Rooki-Radio-Group.vue' import RookiRadio from './components/Rooki-Radio.vue' import RookiSwitch from './components/Rooki-Switch.vue' // 全局注册组件 const app = createApp(App) app.component('Rooki-Button', RookiButton) app.component('Rooki-CheckBox', RookiCheckBox) app.component('Rooki-Checkbox-Group', RookiCheckBoxGroup) app.component('Rooki-Dialog', RookiDialog) app.component('Rooki-Form', RookiForm) app.component('Rooki-Form-Item', RookiFormItem) app.component('Rooki-Input', RookiInput) app.component('Rooki-Radio-Group', RookiRadioGroup) app.component('Rooki-Radio', RookiRadio) app.component('Rooki-Switch', RookiSwitch)