feat 添加自定义指令

admin-fe/src/assets/app.less

@@ -38,6 +38,8 @@
     --info-color: #1890ff;
     --info-color-deprecated-bg: #e6f7ff;
     --info-color-deprecated-border: #91d5ff;
+    --placeholder-color: #ccc;
+    --border-color: #d9d9d9;
 
     --primary-color-text: #333;
     --font-size: 14px;

admin-fe/src/components/button/Index.vue

@@ -21,12 +21,12 @@ defineOptions({
   name: 'PButton'
 })
 type ButtonProps = {
-  type: 'primary' | 'default' | 'text' | 'link'
+  type?: 'primary' | 'default' | 'text' | 'link'
   /**
    * 是否正在加载中
    */
-  loading: boolean
-  disabled: boolean
+  loading?: boolean
+  disabled?: boolean
 }
 const props = defineProps<ButtonProps>()
 const btnType = computed(() => props.type || 'primary')

admin-fe/src/components/input/input.vue

@@ -74,7 +74,7 @@ const value = computed({
   display: inline-block;
   width: 100%;
   min-width: 0;
-  padding: 4px 11px;
+  padding: 0px 11px;
   color: #000000d9;
   font-size: 14px;
   line-height: 1.5715;
@@ -136,7 +136,7 @@ const value = computed({
   position: relative;
   max-width: 100%;
   min-width: 0;
-  padding: 4px 6px;
+  padding: 0px 6px;
   color: #000000d9;
   font-size: 14px;
   line-height: 1.5715;
@@ -157,6 +157,8 @@ const value = computed({
     border: none;
     outline: none;
     margin: 0 6px;
+    height: 28px;
+
 
     &:focus {
       box-shadow: none;

admin-fe/src/components/select/Option.vue

@@ -6,7 +6,12 @@
 import {defineComponent} from "vue";
 
 export default defineComponent({
-  name: "POption"
+  name: "POption",
+  props:{
+    value:{
+      type: [String,Number,Object],
+    }
+  }
 })
 </script>
 

admin-fe/src/components/select/Select.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="select-wrapper">
-    <div class="select-box-wrapper">
-      <span class="select-value">{{ selectValue }}</span>
-      <span class="icon-arrow">
+  <div class="select-wrapper" :class="{active:isActive}" v-click-outside="onClose">
+    <div class="select-box-wrapper" @click="isActive = !isActive">
+      <div class="select-value">{{ selectValue }}<span class="placeholder">{{ placeholder }}</span></div>
+      <div class="icon-arrow">
         <ArrowDown class="icon-select-arrow"/>
-      </span>
+      </div>
+    </div>
+    <div class="select-options-wrapper">
+      <ul>
+        <slot></slot>
+      </ul>
     </div>
-    <ul>
-      <slot></slot>
-    </ul>
   </div>
 </template>
 
@@ -30,6 +32,7 @@ export default {
   props: {
     placeholder: {
       type: String,
+      default: '请选择'
     },
   },
   emits: [
@@ -40,13 +43,91 @@ export default {
   ],
   setup(props) {
     const selectValue = ref(props.modelValue)
+    const isActive = ref(false)
+    function onClose(){
+      isActive.value = false
+    }
     return {
-      selectValue
+      selectValue, isActive,onClose
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="less">
+.select-wrapper {
+  position: relative;
 
+  &.active {
+    .select-options-wrapper {
+      display: block;
+    }
+    .select-box-wrapper{
+      border-color: var(--primary-color);
+      box-shadow: 0 0 3px var(--primary-color);
+    }
+  }
+}
+
+.select-box-wrapper {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  padding: 3px 6px;
+  color: #000000d9;
+  font-size: 14px;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-middle);
+  transition: all .3s;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--primary-color);
+  }
+
+  .placeholder {
+    color: var(--placeholder-color)
+  }
+
+  .select-value {
+    flex: 1;
+  }
+
+  // 右侧图标
+  .icon-arrow {
+    display: flex;
+    align-items: center;
+    color: var(--border-color);
+  }
+}
+
+.select-options-wrapper {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  left: 0;
+  right: 0;
+  top: 32px;
+  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-middle);
+
+  ul, li {
+    list-style: none;
+  }
+
+  li {
+    line-height: 30px;
+    padding: 0 10px;
+
+    &:hover {
+      background-color: #efefef;
+    }
+
+    &.selected {
+      color: var(--primary-color);
+    }
+  }
+}
 </style>

admin-fe/src/directive/click_outside.ts

@@ -0,0 +1,60 @@
+import type {
+    ObjectDirective,
+} from 'vue'
+
+const nodeList = new Map<Element, Function>();
+document.addEventListener('mousedown', (e: MouseEvent) => {
+    e.stopPropagation()
+    // @ts-ignore
+    const paths = e.path as Element[];
+    // console.log(paths)
+    // 已经绑定过指令的元素
+    nodeList.forEach((fn, ele) => {
+        // 当前点击元素的数组
+        for (const c of paths) {
+            // 找到对应的元素 说明是点击了该元素或者他的子元素
+            if (c == ele) {
+                return;
+            }
+        }
+        // 没有找到 说明在外面 可以出发事件
+        fn.call(null)
+    })
+})
+
+// 定义指令
+const clickOutside: ObjectDirective = {
+    // 在绑定元素的 attribute 前
+    // 或事件监听器应用前调用
+    created(el, binding, vnode, prevVnode) {
+        // 下面会介绍各个参数的细节
+        nodeList.set(el,binding.value)
+        // console.log(nodeList)
+    },
+    // 在元素被插入到 DOM 前调用
+    beforeMount(el, binding, vnode, prevVnode) {
+    },
+    // 在绑定元素的父组件
+    // 及他自己的所有子节点都挂载完成后调用
+    mounted(el, binding, vnode, prevVnode) {
+    },
+    // 绑定元素的父组件更新前调用
+    beforeUpdate(el, binding, vnode, prevVnode) {
+    },
+    // 在绑定元素的父组件
+    // 及他自己的所有子节点都更新后调用
+    updated(el, binding, vnode, prevVnode) {
+    },
+    // 绑定元素的父组件卸载前调用
+    beforeUnmount(el, binding, vnode, prevVnode) {
+        nodeList.delete(el)
+        // console.log('remove ', index, el)
+        // nodeList.splice(index, 1)// 移除要销毁的元素
+        // console.log(nodeList)
+    },
+    // 绑定元素的父组件卸载后调用
+    unmounted(el, binding, vnode, prevVnode) {
+    }
+}
+
+export default clickOutside

admin-fe/src/main.ts

@@ -6,6 +6,7 @@ import router from './router'
 import {httpConfig} from "./util/http";
 import './assets/app.less'
 import PInput from "./components/input";
+import clickOutside from "./directive/click_outside";
 
 httpConfig.baseURL = "http://localhost:8080"
 
@@ -14,5 +15,6 @@ const app = createApp(App)
 app.use(router)
 app.use(createPinia());
 app.component('PInput',PInput)
+app.directive('click-outside',clickOutside)
 // 将应用实例挂载到 模板中
 app.mount('#vue-root-app')

admin-fe/src/router/routes.ts

@@ -2,32 +2,52 @@ import {RouteRecordRaw} from "vue-router";
 import Home from '../views/admin/Home.vue'
 import Login from '../views/Login.vue'
 import NotFound from '../views/NotFound.vue'
+import Test from '../views/Test.vue'
 import AdminLayout from '../views/layout/AdminLayout.vue'
 import UserIndex from '../views/user/index.vue'
 import GoodsIndex from '../views/goods/index.vue'
 
+export const AdminRoutes: RouteRecordRaw[] = [
+    {
+        path: 'home',
+        name: 'Home',
+        component: Home,
+        meta: {
+            title: 'Home'
+        }
+    },
+    {
+        path: 'user',
+        name: 'UserIndex',
+        component: UserIndex,
+        meta: {
+            title: '用户管理'
+        }
+    },
+    {
+        path: 'goods',
+        name: 'GoodsIndex',
+        component: GoodsIndex,
+        meta: {
+            title: '商品管理'
+        }
+    },
+    {
+        path: 'test',
+        name: 'TestIndex',
+        component: Test,
+        meta: {
+            title: '测试页'
+        }
+    }
+]
+
 const routes: RouteRecordRaw[] = [
     {
         path: '/',
         component: AdminLayout,
         redirect: '/home',
-        children: [
-            {
-                path: 'home',
-                name: 'Home',
-                component: Home
-            },
-            {
-                path: 'user',
-                name: 'UserIndex',
-                component: UserIndex
-            },
-            {
-                path: 'goods',
-                name: 'GoodsIndex',
-                component: GoodsIndex
-            }
-        ]
+        children: AdminRoutes
     },
     {
         path: '/login',

admin-fe/src/views/Test.vue

@@ -1,43 +1,54 @@
 <template>
-    <div class="demo-box">
-        <div class="form-item">
-            <PInput placeholder="测试21" v-model="data.a">
-                <template #suffix>
-                    <span>密码</span>
-                </template>
-            </PInput>
-        </div>
-        <div class="form-item">
-            <PInput type="password" placeholder="测试12" v-model="data.b"/>
-        </div>
-        <div class="form-item">
-            <PInput type="password" placeholder="测试12" v-model="data.b"/>
-        </div>
-        <div>
-            {{ JSON.stringify(data) }}
-        </div>
+  <div class="demo-box">
+    <div>
+      <div class="form-item">
+        <PInput placeholder="测试21" v-model="data.a">
+          <template #suffix>
+            <span>密码</span>
+          </template>
+        </PInput>
+      </div>
+      <div class="form-item">
+        <PInput type="password" placeholder="测试12" v-model="data.b"/>
+      </div>
+      <div class="form-item">
+        <PInput type="password" placeholder="测试12" v-model="data.b"/>
+      </div>
+      <div>
+        {{ JSON.stringify(data) }}
+      </div>
     </div>
+    <hr>
+    商品类型
+    <p-select>
+      <p-option value="1">普通商品</p-option>
+      <p-option class="selected" value="2">精选商品</p-option>
+      <p-option value="3">秒杀商品</p-option>
+    </p-select>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import PInput from "../components/input";
 import {reactive} from "vue";
+import PSelect from "../components/select/Select.vue";
+import POption from "../components/select/Option.vue";
 
 const data = reactive({
-    a: '1',
-    b: '2'
+  a: '1',
+  b: '2'
 })
 </script>
 
 <style scoped>
 .demo-box {
-    width: 500px;
-    border: solid 1px #f00;
-    margin: auto;
-    padding: 20px;
+  width: 500px;
+  border: solid 1px #f00;
+  margin: auto;
+  padding: 20px;
 }
 
 .form-item {
-    margin: 10px 0;
+  margin: 10px 0;
 }
 </style>

admin-fe/src/views/layout/AdminLayout.vue

@@ -13,9 +13,7 @@
       <div class="left-menu">
         <div class="title">积分管理系统</div>
         <div class="menu-list">
-          <router-link active-class="active-menu" to="/home">HOME</router-link>
-          <router-link active-class="active-menu" to="/goods">商品管理</router-link>
-          <router-link active-class="active-menu" to="/user">用户管理</router-link>
+          <router-link v-for="r in AdminRoutes" active-class="active-menu" :to="'/' + r.path">{{ r.meta.title }}</router-link>
         </div>
       </div>
       <div class="content-wrapper">
@@ -30,6 +28,7 @@
 <script setup>
 import {useUserStore} from "../../service/store";
 import {useRouter} from "vue-router";
+import {AdminRoutes} from './../../router/routes'
 
 const userStore = useUserStore();
 const router = useRouter()

admin-fe/tsconfig.json

@@ -15,6 +15,12 @@
     "jsx": "preserve",
     "types": [
       "unplugin-vue-define-options/macros-global"
+    ],
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015.collection"
     ]
   }
 }