SlyLabel.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <div :style="$getStyle(styles)">
  3. <u-section :font-size="headline.fontSize" :bold="headline.bold" :showLine="headline.showLine"
  4. :color="headline.color" :title="dataVal.headline" :right="false">
  5. <template v-slot:right>
  6. <view>1</view>
  7. </template>
  8. </u-section>
  9. </div>
  10. </template>
  11. <script>
  12. import Mixin from "../Mixin";
  13. export default {
  14. name: "SlyLabel",
  15. mixins: [Mixin],
  16. data() {
  17. return {
  18. headline: {
  19. fontSize: 28,
  20. bold: true,
  21. color: '',
  22. showLine: true
  23. }
  24. };
  25. },
  26. watch: {
  27. attrs: {
  28. handler: function(newAtt, oldAtt) {
  29. if (!newAtt) return
  30. const {
  31. headline,
  32. subhead
  33. } = newAtt;
  34. this.headline.fontSize = uni.upx2px(headline.fontSize)
  35. this.headline.bold = headline.bold
  36. this.headline.color = headline.color
  37. this.headline.showLine = headline.showLine
  38. },
  39. deep: true,
  40. immediate: true
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. .sly-label {
  47. display: flex;
  48. justify-content: space-between;
  49. align-items: center;
  50. }
  51. </style>