ShadowUI3

# 安装使用指南

# 前置要求

  • Node.js 16+
  • npm 或 yarn
  • uni-app CLI 或 HBuilderX

# 安装方式

# 方式一：在 uni-app 项目中使用

  1. 将 shadow-ui 目录复制到你的 uni-app 项目的 uni_modules 目录下
  2. 框架会自动注册并可用

# 方式二：在 Vue 3 项目中使用

（注：这需要额外配置以确保跨平台兼容性）

# 引入使用

# Vue 2 项目

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

// 引入全局UI
import shadowUi from '@/uni_modules/shadow-ui'
Vue.use(shadowUi)

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

# Vue 3 项目（使用 Composition API）

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

// 引入全局UI
import shadowUi from '@/uni_modules/shadow-ui'

const app = createApp(App)
app.use(store)
app.use(shadowUi)
app.mount('#app')

# 基础使用

# 按钮组件示例

<template>
  <div class="button-demo">
    <ui-button type="primary" @click="handleClick">主要按钮</ui-button>
    <ui-button type="success" @click="handleClick">成功按钮</ui-button>
    <ui-button type="warning" @click="handleClick">警告按钮</ui-button>
    <ui-button type="danger" @click="handleClick">危险按钮</ui-button>
    <ui-button type="info" @click="handleClick">信息按钮</ui-button>
    
    <ui-button type="primary" disabled>禁用主要按钮</ui-button>
    <ui-button type="primary" plain>朴素主要按钮</ui-button>
    <ui-button type="primary" round>圆形主要按钮</ui-button>
    <ui-button type="primary" circle icon="search">搜索</ui-button>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了！');
};
</script>

<style scoped>
.button-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
</style>

# 表单组件示例

<template>
  <ui-form :model="form" :rules="rules" ref="formRef">
    <ui-form-item label="用户名" prop="username">
      <ui-form-input v-model="form.username" placeholder="请输入用户名" />
    </ui-form-item>
    
    <ui-form-item label="密码" prop="password">
      <ui-form-input v-model="form.password" type="password" placeholder="请输入密码" />
    </ui-form-item>
    
    <ui-form-item label="性别" prop="gender">
      <ui-form-radio-group v-model="form.gender">
        <ui-form-radio label="male">男</ui-form-radio>
        <ui-form-radio label="female">女</ui-form-radio>
      </ui-form-radio-group>
    </ui-form-item>
    
    <ui-form-item label="爱好" prop="hobbies">
      <ui-form-checkbox-group v-model="form.hobbies">
        <ui-form-checkbox label="reading">阅读</ui-form-checkbox>
        <ui-form-checkbox label="sports">运动</ui-form-checkbox>
        <ui-form-checkbox label="music">音乐</ui-form-checkbox>
      </ui-form-checkbox-group>
    </ui-form-item>
    
    <ui-form-item label="简介" prop="introduction">
      <ui-form-textarea v-model="form.introduction" placeholder="请输入简介" rows="4" />
    </ui-form-item>
    
    <ui-form-item label="同意条款">
      <ui-form-switch v-model="form.agree" />
    </ui-form-item>
    
    <ui-form-item>
      <ui-button type="primary" @click="submitForm">提交</ui-button>
      <ui-button @click="resetForm">重置</ui-button>
    </ui-form-item>
  </ui-form>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formRef = ref(null);
const form = reactive({
  username: '',
  password: '',
  gender: 'male',
  hobbies: [],
  introduction: '',
  agree: false
});

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  hobbies: [
    { required: true, message: '请至少选择一个爱好', trigger: 'change' }
  ],
  agree: [
    { type: 'boolean', required: true, message: '请同意条款', trigger: 'change' }
  ]
});

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单验证通过', form);
      // 这里可以添加表单提交逻辑
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};

const resetForm = () => {
  formRef.value.resetFields();
};
</script>

# 注意事项

  1. 部分版本的小程序不支持使用 text 标签作为图标容器
  2. 页面的背景色样式不能使用 scoped 修饰符，否则在小程序中可能不生效
  3. 使用组件时，请确保传入的 props 类型正确
  4. 对于需要异步加载数据的组件，请确保在数据加载完成后再渲染组件

← 开发指南 →