怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语
首页 新随笔 联系 管理
  822 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读
tailwindcss_封装

/admin-one-vue-tailwind-master/index.html

<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="/favicon.png">
  <title>Admin One - Vue.js 3 Tailwind dashboard template</title>
 
  <meta name="description" content="Admin One - free Vue.js 3 Tailwind dashboard">
 
</head>
 
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
 
</html>```
# `/admin-one-vue-tailwind-master/src/App.vue`
 
```vue
<script setup>
import { RouterView } from "vue-router";
</script>
 
<template>
  <RouterView />
</template>

/admin-one-vue-tailwind-master/src/main.js

import { createApp } from "vue";
 
import App from "./App.vue";
import router from "./router";
 
import "./css/main.css";
 
/* Create Vue app */
createApp(App).use(router).mount("#app");

/admin-one-vue-tailwind-master/src/components/FormCheckRadio.vue

<script setup>
import { computed } from "vue";
 
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  type: {
    type: String,
    default: "checkbox",
    validator: (value) => ["checkbox", "radio", "switch"].includes(value),
  },
  label: {
    type: String,
    default: null,
  },
  modelValue: {
    type: [Array, String, Number, Boolean],
    default: null,
  },
  inputValue: {
    type: [String, Number, Boolean],
    required: true,
  },
});
 
const emit = defineEmits(["update:modelValue"]);
 
const computedValue = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit("update:modelValue", value);
  },
});
 
const inputType = computed(() =>
  props.type === "radio" ? "radio" : "checkbox"
);
</script>
 
<template>
  <label :class="type">
    <input
      v-model="computedValue"
      :type="inputType"
      :name="name"
      :value="inputValue"
    />
    <span class="check" />
    <span class="pl-2">{{ label }}</span>
  </label>
</template>

/admin-one-vue-tailwind-master/src/components/FormCheckRadioGroup.vue

<script setup>
import { computed } from "vue";
import FormCheckRadio from "@/components/FormCheckRadio.vue";
 
/* <FormCheckRadioGroup
    v-model="customElementsForm.checkbox"
    name="sample-checkbox"
    :options="checkOptions"
    @update:model-value="updateCheckState"
  /> */
 
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
  name: {
    type: String,
    required: true,
  },
  type: {
    type: String,
    default: "checkbox",
    validator: (value) => ["checkbox", "radio", "switch"].includes(value),
  },
 
  isColumn: Boolean,
 
  modelValue: {
    type: [Array, String, Number, Boolean],
    default: null,
  },
});
 
console.log(props.modelValue);
 
const emit = defineEmits(["update:modelValue"]);
 
const computedValue = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit("update:modelValue", value);
  },
});
</script>
 
<template>
  <div
    class="flex justify-start flex-wrap -mb-3"
    :class="{ 'flex-col': isColumn }"
  >
    <FormCheckRadio
      v-for="(value, key) in options"
      :key="key"
      v-model="computedValue"
      :type="type"
      :name="name"
      :input-value="key"
      :label="value"
      class="mr-6 mb-3 last:mr-0"
    />
  </div>
</template>

/admin-one-vue-tailwind-master/src/views/FormsView.vue

<script setup>
import { reactive } from "vue";
import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
 
const checkOptions = {
  lorem: "Lorem",
  ipsum: "Ipsum",
  dolore: "Dolore",
};
 
const customElementsForm = reactive({
  checkbox: ["lorem"],
  radio: "one",
  switch: ["one"],
});
 
const updateCheckState = (e) => {
  console.log(e);
};
const updateRadioState = (e) => {
  console.log(e);
};
const updateSwitchState = (e) => {
  console.log(e);
};
</script>
 
<template>
  <div class="flex">
    <!--
      _circle.css
      @layer components {
        .circle {
          @apply bg-pink-300 ml-2 mt-2 rounded-full w-10 h-10
        }
      .pill {
          @apply bg-red-300 ml-2 mt-2 rounded-full w-20 h-10
        }
      }
      -->
    <div class="bg-green-300 ml-2 mt-2 rounded-full w-10 h-10"></div>
    <div class="bg-green-300 ml-2 mt-2 rounded-full w-10 h-10"></div>
    <div class="bg-green-300 ml-2 mt-2 rounded-full w-10 h-10"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="pill"></div>
    <div class="pill"></div>
    <div class="pill"></div>
  </div>
 
  <FormCheckRadioGroup
    v-model="customElementsForm.checkbox"
    name="sample-checkbox"
    :options="checkOptions"
    @update:model-value="updateCheckState"
  />
 
  <FormCheckRadioGroup
    v-model="customElementsForm.radio"
    name="sample-radio"
    type="radio"
    :options="{ one: 'One', two: 'Two' }"
    @update:model-value="updateRadioState"
  />
 
  <FormCheckRadioGroup
    v-model="customElementsForm.switch"
    name="sample-switch"
    type="switch"
    :options="{ one: 'One', two: 'Two' }"
    @update:model-value="updateSwitchState"
  />
</template>

/admin-one-vue-tailwind-master/src/router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
 
const routes = [
  {
    meta: {
      title: "Home",
    },
    path: "/",
    redirect: "/forms",
  },
 
  {
    meta: {
      title: "Forms",
    },
    path: "/forms",
    name: "forms",
    component: () => import("@/views/FormsView.vue"),
  },
];
 
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 };
  },
});
 
export default router;
posted on   超级无敌美少男战士  阅读(79)  评论(0)  编辑  收藏  举报
相关博文：
· tailwindcss封装一个按钮
· vue vue3 jsx tsx
· Tailwind CSS 实战指南：快速构建响应式网页设计
· 我的Vue之旅、05 导航栏、登录、注册 (Mobile)
· uni-app Vue3项目引入Tailwind CSS
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示