dpzvc3-ui 3.0.0

package/src/views/Card.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="CardDemo">
+    <!-- 基础卡片 -->
+    <Card width="80%">
+      <template #header>
+        <h3 class="item">
+          卡片头部
+        </h3>
+      </template>
+      <template #default>
+        <p class="item-main">
+          这里是卡片内容
+        </p>
+      </template>
+      <template #footer>
+        <span class="item">
+          <button @click="onClick">
+            操作按钮
+          </button>
+        </span>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+// import Card from '../components/card'
+
+export default {
+  name: 'ViewCard',
+  setup () {
+    const count = ref(0)
+
+    const onClick = () => {
+      count.value += 1
+      console.log('点击了第一张卡片按钮', count.value)
+    }
+
+    const onClick2 = () => {
+      count.value += 2
+      console.log('点击了第二张卡片按钮', count.value)
+    }
+
+    return {
+      count,
+      onClick,
+      onClick2
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.CardDemo {
+   background: #4d4d4d;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        .item {
+            width: 100%;
+            height: 100%;
+            ;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .item-main {
+            width: 100%;
+            height: 200px;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+  button {
+    padding: 4px 12px;
+    background-color: #409eff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+}
+</style>

package/src/views/Cell.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="Cell">
+    <Cell
+      title="Guide"
+      label="导航"
+      link="/guide"
+      value="跳转到导航页"
+    />
+    <Cell
+      title="Index"
+      label="主页"
+      link="/guide"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ViewCell'
+
+}
+</script>
+
+<style  lang="less" scoped>
+    .Cell {
+        width: 100%;
+        position: relative;
+    }
+</style>

package/src/views/CellSwipe.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="CellSwipe">
+    <CellSwipe
+      :right="right"
+      title="向左滑"
+      has-mask
+    />
+    <CellSwipe
+      :left="left"
+      title="向右滑"
+      has-mask
+    />
+    <template v-if="show">
+      <CellSwipe
+        :left="left"
+        :right="right"
+        title="删除测试"
+        has-mask
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, getCurrentInstance } from 'vue'
+import CellSwipe from '../components/cell-swipe'
+
+const show = ref(true)
+const { proxy } = getCurrentInstance() // 用于访问全局 Modal
+
+const left = reactive([
+  {
+    content: '确定',
+    style: { backgroundColor: '#eee', color: '#fff' },
+    handleClick: () => {
+      proxy.$Modal.info({ body: '点击了确定' })
+    }
+  },
+  {
+    content: '删除',
+    style: { backgroundColor: 'red', color: '#fff' },
+    handleClick: () => {
+      proxy.$Modal.info({ body: '点击了删除' })
+    }
+  }
+])
+
+const right = reactive([
+  {
+    content: '确定',
+    style: { backgroundColor: '#eee', color: '#fff' },
+    handleClick: () => {
+      proxy.$Modal.info({ body: '点击了确定' })
+    }
+  },
+  {
+    content: '删除',
+    style: { backgroundColor: 'red', color: '#fff' },
+    handleClick: () => {
+      proxy.$Modal.info({ body: '点击了删除' })
+    }
+  }
+])
+</script>
+
+<style scoped>
+/* 可自行添加样式 */
+</style>

package/src/views/CheckBox.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="CheckBox">
+    <p>checkbox 组合</p>
+    <div class="item">
+      <CheckBoxGroup v-model="data">
+        <CheckBox label="中国" />
+        <CheckBox label="美国" />
+        <CheckBox label="日本" />
+      </CheckBoxGroup>
+    </div>
+
+    <div class="item">
+      value: {{ data }}
+    </div>
+
+    <p>单个 checkbox</p>
+    <div class="item">
+      <CheckBox
+        v-model="checked"
+        label="苹果"
+        @onChange="change"
+      />
+    </div>
+
+    <div class="item">
+      checked: {{ checked }}
+    </div>
+
+    <p>禁用的 checkbox</p>
+    <div class="item">
+      <CheckBox
+        label="玩具"
+        disable
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewCheckBox',
+
+  setup () {
+    const data = ref(['中国'])
+    const checked = ref(false)
+    const change = (e) => {
+      console.log(e, 'e')
+    }
+    return {
+      data,
+      change,
+      checked
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.CheckBox {
+  padding-top: 100px;
+
+  p {
+    width: 100%;
+    font-weight: bold;
+    font-size: 16px;
+    margin: 20px 0;
+  }
+
+  .item {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

package/src/views/Header.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="Header">
+    <!-- 默认 Header -->
+    <div class="item">
+      <DpHeader
+        title="Header"
+        :fixed="fixed"
+      />
+    </div>
+
+    <!-- Header 右侧自定义 -->
+    <div class="item">
+      <DpHeader
+        title="Header"
+        :fixed="fixed"
+      >
+        <template #right>
+          <span @click="share">分享</span>
+        </template>
+      </DpHeader>
+    </div>
+
+    <!-- Header 左右自定义 -->
+    <div class="item">
+      <DpHeader
+        title="Header"
+        :fixed="fixed"
+      >
+        <template #left>
+          <span>返回</span>
+        </template>
+        <template #right>
+          <span @click="share">分享</span>
+        </template>
+      </DpHeader>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, getCurrentInstance } from 'vue'
+
+export default {
+  name: 'ViewHeader',
+  setup () {
+    const { proxy } = getCurrentInstance()
+    const fixed = ref(false)
+
+    const share = () => {
+      // 假设 $Modal 已经在全局挂载
+      if (proxy) {
+        proxy.$Modal.confirm({
+          showHead: false,
+          body: '点击了分享'
+        })
+      }
+    }
+
+    return { fixed, share }
+  }
+}
+</script>
+
+<style scoped>
+.item {
+  position: relative;
+  margin-bottom: 20px;
+  height: 50px;
+}
+</style>

package/src/views/Indicator.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="Indicator">
+    <div class="item">
+      <VButton @click="blade">
+        blade
+      </VButton>
+    </div>
+    <div class="item">
+      <VButton @click="snake">
+        snake
+      </VButton>
+    </div>
+    <div class="item">
+      <VButton @click="circle">
+        circle
+      </VButton>
+    </div>
+    <div class="item">
+      <VButton @click="bounce">
+        bounce
+      </VButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+
+export default defineComponent({
+  name: 'ViewIndicator',
+  setup () {
+    const { proxy } = getCurrentInstance()
+    const removeAfterDelay = (duration = 3000) => {
+      setTimeout(() => {
+        proxy.$Indicator.remove()
+      }, duration)
+    }
+
+    const blade = () => {
+      proxy.$Indicator.blade()
+      removeAfterDelay()
+    }
+
+    const snake = () => {
+      proxy.$Indicator.snake()
+      removeAfterDelay()
+    }
+
+    const circle = () => {
+      proxy.$Indicator.circle()
+      removeAfterDelay()
+    }
+
+    const bounce = () => {
+      proxy.$Indicator.bounce()
+      removeAfterDelay()
+    }
+
+    return {
+      blade,
+      snake,
+      circle,
+      bounce
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.Indicator {
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+
+  .item {
+    margin: 0 auto;
+    width: 50%;
+  }
+}
+</style>

package/src/views/LoadMore.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="LoadMore">
+    <LoadMore
+      ref="moreRef"
+      :refresh="topMethod"
+      height="100%"
+      :load-more="bottomMethod"
+      :has-more="hasMore"
+      @on-change-up-status="getStatus"
+    >
+      <div
+        v-for="(item, index) in loadmore"
+        :key="index"
+        style="width: 100%; height: 50px;"
+      >
+        {{ item }}
+      </div>
+    </LoadMore>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewLoadMore',
+  setup () {
+    const moreRef = ref(null)
+    const hasMore = ref(true)
+    const loadmore = ref(Array(16).fill('LoadMore'))
+
+    const topMethod = () => {
+      hasMore.value = true
+
+      setTimeout(() => {
+        if (moreRef.value && moreRef.value.onLoadOff) {
+          moreRef.value.onLoadOff()
+        }
+      }, 2000)
+    }
+
+    const bottomMethod = () => {
+      setTimeout(() => {
+        if (moreRef.value && moreRef.value.onLoadOff) {
+          moreRef.value.onLoadOff()
+        }
+        loadmore.value.push(...['LoadMore', 'LoadMore'])
+      }, 2000)
+    }
+
+    const getStatus = (val) => {
+      console.log(val)
+    }
+
+    return {
+      moreRef,
+      hasMore,
+      loadmore,
+      topMethod,
+      bottomMethod,
+      getStatus
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.LoadMore {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+</style>

package/src/views/Message.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="Message">
+    <VButton
+      width="50%"
+      @click="showMessageTop"
+    >
+      Top
+    </VButton>
+    <VButton
+      width="50%"
+      @click="showMessage"
+    >
+      Center
+    </VButton>
+    <VButton
+      width="50%"
+      @click="showMessageBottom"
+    >
+      Bottom
+    </VButton>
+  </div>
+</template>
+
+<script>
+import { getCurrentInstance } from 'vue'
+
+export default {
+  name: 'ViewMessage',
+  setup () {
+    // 获取全局实例
+    const { proxy } = getCurrentInstance()
+    const showMessage = () => {
+      proxy.$Message.show({ text: '显示消息' })
+    }
+
+    const showMessageTop = () => {
+      proxy.$Message.show({ text: '显示消息', position: 'top' })
+    }
+
+    const showMessageBottom = () => {
+      proxy.$Message.show({ text: '显示消息', position: 'bottom' })
+    }
+
+    return {
+      showMessage,
+      showMessageTop,
+      showMessageBottom
+    }
+  }
+}
+</script>
+
+<style scoped>
+.Message {
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+}
+</style>

package/src/views/Modal.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="Modal">
+    <VButton
+      width="50%"
+      @click="showInfo"
+    >
+      info
+    </VButton>
+    <VButton
+      width="50%"
+      @click="showConfirm"
+    >
+      confirm
+    </VButton>
+  </div>
+</template>
+
+<script>
+import { getCurrentInstance } from 'vue'
+import VButton from '../components/button'
+
+export default {
+  name: 'ViewModal',
+  components: { VButton },
+  setup () {
+    // 获取实例，用来访问全局属性 $Modal / $Message
+    const { proxy } = getCurrentInstance()
+
+    const showInfo = () => {
+      proxy.$Modal.info({
+        body: '这是内容',
+        onOk: function () {
+          proxy.$Message.show({ text: '点击了确定' })
+          // console.log('点击了确定')
+        },
+        onCancle: function () {
+          proxy.$Message.show({ text: '点击了取消' })
+          // console.log('点击了取消')
+        }
+      })
+    }
+
+    const showConfirm = () => {
+      proxy.$Modal.confirm({
+        body: '这是内容',
+        onOk: function () {
+          proxy.$Message.show({ text: '点击了确定' })
+          // console.log('点击了确定')
+        }
+      })
+    }
+
+    return {
+      showInfo,
+      showConfirm
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.Modal {
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+}
+</style>