qtsk-vue3 0.0.9 → 0.0.10

package/package/component.js

@@ -1,4 +1,4 @@
-import Button from './components/Button/index.vue'
+import CommonButton from './components/Button/index.vue'
 import Container from './components/Container/index.vue'
 import Menu from './components/Menu/index.vue'
 import Icons from './components/Icons/index.vue'
@@ -12,10 +12,11 @@ import Tree from './components/Tree/index.vue'
 import Dialog from './components/Dialog/index.vue'
 import Form from './components/Form/index.vue'
 import FormItem from './components/FormItem/index.vue'
+import Empty from './components/Empty/index.vue'
 
 const components = 
     [
-        Button, 
+        CommonButton, 
         Container,
         Menu, 
         Icons, 
@@ -28,6 +29,7 @@ const components =
         Tree, 
         Dialog,
         Form,
-        FormItem
+        FormItem,
+        Empty
     ]
 export default components

package/package/components/Button/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="[type === 'default' ? 'defaultClass' : 'normalClass']">
-      <el-button :type="type" :color="color" :link="link">
+    <div class="normalClass">
+      <el-button :type="type" :color="color" :link="link" :loading="loading">
         <slot>按钮</slot>
       </el-button>
     </div>
@@ -11,35 +11,32 @@ import { ElButton} from 'element-plus'
 import '../../style/root.css'
 
 defineOptions({
-  name: 'Button',
+  name: 'CommonButton',
 })
-const props = defineProps({
+defineProps({
   type:{
     type: String,
     default: 'default', //可选数值有， primary/default
   },
   color: {
     type: String,
-    default: '#4d4398'
+    default: ''
   },
   link: {
     type: Boolean,
     default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 //根据不同的类型，自定义按钮颜色
-const color = props.type === 'primary' ? props.color : ''
+// const color = props.type === 'primary' ? props.color : ''
 </script>
 
 <style lang="less" scoped>
 .normalClass{
   margin: 0 10px;
 }
-.defaultClass{
-  margin: 0 10px;
-  :deep(.el-button){
-    color: var(--qt-main-color)!important;
-    border-color: var(--qt-main-color)!important;
-  }
-}
 </style>

package/package/components/Container/index.vue

@@ -38,6 +38,7 @@ defineOptions({
         .el-header{
             display: flex;
             align-items: center;
+            justify-content: space-between;
             height: 60px;
         }
         .el-aside, .el-main{

package/package/components/DatePicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <el-date-picker v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
+    <el-date-picker style="width: 100%;" v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
   </el-config-provider>
 </template>
 
@@ -23,7 +23,8 @@ const props = defineProps({
   },
 })
 
-const modelValue = defineModel('modelValue', { type: Boolean })
+const modelValue = defineModel('modelValue', { type: String })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+</style>

package/package/components/Dialog/index.vue

@@ -38,14 +38,14 @@ defineProps({
 })
 
 let modelValue = defineModel('modelValue', {type: Boolean})
-
+let emits = defineEmits(['confirm'])
 // 点击取消
 const handleCancel = () => {
   modelValue.value = false
 }
 // 点击确认
 const handleConfirm = () => {
-  modelValue.value = false
+  emits('confirm')
 }
 </script>
 

package/package/components/Empty/index.vue

@@ -0,0 +1,20 @@
+<template>
+     <el-empty :description="description" />
+</template>
+
+<script setup>
+import { ElEmpty} from 'element-plus'
+
+defineOptions({
+  name: 'Empty',
+})
+defineProps({
+  description:{
+    type: String,
+    default: '敬请期待',
+  }
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/Form/index.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { ElForm } from 'element-plus'
 
 defineOptions({
@@ -21,8 +22,8 @@ defineOptions({
 
 defineProps({
   rules: {
-    type: Array,
-    default: () => ([])
+    type: Object,
+    default: () => ({})
   },
   inline: {
     type: Boolean,
@@ -31,6 +32,17 @@ defineProps({
 })
 
 let formData = defineModel('formData', {type: Object})
+let ruleFormRef = ref(null)
+
+const resetForm = () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.resetFields()
+}
+
+defineExpose({
+  resetForm,
+  ruleFormRef
+})
 
 </script>
 

package/package/components/Input/index.vue

@@ -1,5 +1,14 @@
 <template>
-    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs"/>
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs">
+        <template #prepend v-if="$slots.prepend">
+            <!-- 前缀 -->
+            <slot name="prepend" />
+        </template>
+        <template #append v-if="$slots.append">
+            <!-- 后缀 -->
+            <slot name="append" />
+        </template>
+    </ElInput>
 </template>
 
 <script setup>
@@ -24,6 +33,6 @@ const inputValue = defineModel('modelValue', {default: '',type: [String, Number]
 
 <style lang="less" scoped>
 :deep(.el-textarea__inner:focus), :deep(.el-input__wrapper.is-focus){
-    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+    box-shadow: 0 0 0 1px var(--main-color) inset;
 }
 </style>

package/package/components/Select/index.vue

@@ -1,5 +1,11 @@
 <template>
-    <el-select v-model="selectValue" :placeholder="placeholder" v-bind="$attrs" :teleported="false">
+    <el-select
+        v-model="selectValue" 
+        :placeholder="placeholder" 
+        v-bind="$attrs" 
+        :teleported="false" 
+        clearable
+    >
         <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]" />
     </el-select>
 </template>

package/package/components/Table/index.vue

@@ -7,14 +7,15 @@
         :width="column.width"
         :fixed="column.fixed"
         :key="index"
+        :show-overflow-tooltip="column.width?true:false"
       >
         <template #default="scope">
-          <div v-if="column.key!=='operations'">
+          <template v-if="column.key!=='operations'">
             {{ scope.row[column.key] }}
-          </div>
-          <div v-else>
+          </template>
+          <template v-else>
              <slot name="operations" :data="scope.row" :index="scope.$index"/>
-          </div>
+          </template>
         </template>
       </el-table-column>
       <template #empty>

package/package/components/Tree/index.vue

@@ -1,14 +1,15 @@
 <template>
   <el-tree 
     ref="treeRef"
-    style="max-width: 600px" 
+    style="max-width: 600px;padding-top: 4px;" 
     :data="data" 
     :props="defaultProps" 
     :show-checkbox="showCheckBox" 
     default-expand-all
     :node-key="nodeKey"
     :expand-on-click-node="false"
-    @node-click="handleNodeClick" 
+    @node-click="handleNodeClick"
+    @check-change="checkChange"
   />
 </template>
 
@@ -17,6 +18,8 @@ import { ref } from 'vue'
 import { ElTree } from 'element-plus'
 
 const treeRef = ref(null)
+const modelValue = defineModel('modelValue', { type: Array })
+
 defineOptions({
   name: 'Tree',
 })
@@ -50,6 +53,12 @@ const defaultProps = {
 const getCheckedKeys = () => {
   console.log(treeRef.value.getCheckedKeys(false))
 }
+
+//当复选框被点击的时候触发, 用于获取所有的选中数据
+const checkChange = () => {
+  modelValue.value = treeRef.value.getCheckedKeys(false)
+}
+
 defineExpose({
   getCheckedKeys
 })

package/package/index.backup.js

@@ -1,5 +1,5 @@
 import Components from './component'
-import { QTMessage, QTMessageBox } from './components/Message'
+import { Message, MessageBox } from './components/Message'
 
 const makeInstaller = (components = [], directives = []) => {
     const apps = []
@@ -17,6 +17,6 @@ const makeInstaller = (components = [], directives = []) => {
 
 const install = makeInstaller(Components)
 
-export { QTMessage, QTMessageBox, install, install as default }
+export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/index.js

@@ -19,7 +19,4 @@ const install = makeInstaller(Components)
 
 export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')
-
-
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:yellow;')
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/style/root.css

@@ -1,5 +1,5 @@
 /* 标准化样式定义 */
 :root{
     --main-color: #4d4398;
-    --main-background-color: #e0edff;
-}
+    --main-background-color: #e0edff
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qtsk-vue3",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "vue3版组件库",
   "main": "./package/index.js",
   "scripts": {