su-subline.vue 922 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <view class="ui-subline-wrap" :style="[elStyle]"></view>
  3. </template>
  4. <script setup>
  5. /**
  6. * 辅助线
  7. *
  8. * @property {String} width = ['thin', 'medium', 'thick', '10px'] - 线条宽度
  9. * @property {String} color = #000 - 线条颜色
  10. * @property {String} style = ['dotted', 'solid', 'double', 'dashed'] - 线条样式,圆点,实线,双线,虚线
  11. *
  12. */
  13. import { computed } from 'vue';
  14. // 接收参数
  15. const props = defineProps({
  16. color: {
  17. type: String,
  18. default: '#000',
  19. },
  20. lineStyle: {
  21. type: String,
  22. default: 'dashed',
  23. },
  24. width: {
  25. type: String,
  26. default: 'thin',
  27. },
  28. });
  29. const elStyle = computed(() => {
  30. return {
  31. 'border-top-width': props.width,
  32. 'border-top-color': props.color,
  33. 'border-top-style': props.lineStyle,
  34. };
  35. });
  36. </script>
  37. <style lang="scss" scoped></style>