baseTextPro.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!-- 基本的文本属性框 -->
  2. <template>
  3. <div class="base-text">
  4. <div class="title">属性</div>
  5. <ul>
  6. <li>
  7. <div class="small-title">边框</div>
  8. <div class="property">
  9. <div class="color-box">
  10. <div class="cololorSelect">
  11. <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
  12. </div>
  13. <span>颜色</span>
  14. </div>
  15. <div class="line-width">
  16. <el-input-number
  17. style="width:80px"
  18. v-model="fontSize"
  19. controls-position="right"
  20. @change="changeFontSize"
  21. size="mini"
  22. :min="1"
  23. :max="20"
  24. :maxlength="100"
  25. ></el-input-number>
  26. <span>字号</span>
  27. </div>
  28. <div class="color-box">
  29. <div class="cololorSelect">
  30. <el-color-picker
  31. @change="changeBackground"
  32. show-alpha
  33. class="fix-box-1"
  34. v-model="backgroundcolor"
  35. ></el-color-picker>
  36. </div>
  37. <span>背景颜色</span>
  38. </div>
  39. </div>
  40. </li>
  41. <li>
  42. <el-input
  43. type="textarea"
  44. @input="changeText"
  45. :autosize="{ minRows: 2, maxRows: 4}"
  46. v-model="text"
  47. ></el-input>
  48. <span>文本</span>
  49. </li>
  50. </ul>
  51. </div>
  52. </template>
  53. <script>
  54. import bus from "@/bus/bus";
  55. export default {
  56. props: ["strokeColor", "fontSize", "backgroundColor", "textMsg"],
  57. data() {
  58. return {
  59. size: 0, //font-size
  60. text: "", //文本
  61. color: "",
  62. backgroundcolor: "",
  63. borderLineOption: [
  64. {
  65. id: "solid",
  66. src: require("@/assets/images/solidLine.png"),
  67. },
  68. {
  69. id: "dashed",
  70. src: require("@/assets/images/dashedLine.png"),
  71. },
  72. {
  73. id: "dotted",
  74. src: require("@/assets/images/dotLine.png"),
  75. },
  76. ],
  77. borderStyle: "solid",
  78. };
  79. },
  80. methods: {
  81. // 改变文字
  82. changeText(val) {
  83. bus.$emit("updateStyle", "text", val);
  84. },
  85. // 改变颜色
  86. changeColor(val) {
  87. bus.$emit("updateStyle", "strokeColor", val);
  88. },
  89. // 改变背景颜色
  90. changeBackground(val) {
  91. bus.$emit("updateStyle", "backgroundColor", val);
  92. },
  93. // 改变字体大小
  94. changeFontSize(val) {
  95. bus.$emit("updateStyle", "font", val);
  96. },
  97. },
  98. mounted() {
  99. // console.log(Select)
  100. },
  101. watch: {
  102. strokeColor(val) {
  103. this.color = val;
  104. },
  105. fontSize(val) {
  106. this.size = val;
  107. },
  108. backgroundColor(val) {
  109. this.backgroundcolor = val;
  110. },
  111. textMsg(val) {
  112. this.text = val;
  113. },
  114. },
  115. };
  116. </script>
  117. <style lang="less" scoped>
  118. ul,
  119. li {
  120. margin: 0;
  121. padding: 0;
  122. list-style-type: none;
  123. }
  124. .base-text {
  125. .title {
  126. height: 47px;
  127. border-bottom: 1px solid #979797;
  128. color: #646c73;
  129. font-size: 16px;
  130. padding-left: 12px;
  131. box-sizing: border-box;
  132. }
  133. ul {
  134. width: calc(~"100% - 24px");
  135. margin: -1px 12px 0 12px;
  136. li {
  137. border-top: 1px solid #979797;
  138. .small-title {
  139. font-size: 12px;
  140. color: #8d9399;
  141. margin: 12px 0;
  142. }
  143. .property {
  144. display: flex;
  145. align-items: center;
  146. justify-content: space-around;
  147. .color-box {
  148. display: flex;
  149. align-items: center;
  150. flex-direction: column;
  151. .cololorSelect {
  152. width: 32px;
  153. height: 20px;
  154. overflow: hidden;
  155. position: relative;
  156. margin: 4px 0;
  157. .fix-box-1 {
  158. margin-top: -8px;
  159. margin-left: -8px;
  160. /deep/ .el-color-picker__trigger {
  161. width: 200px;
  162. height: 200px;
  163. }
  164. }
  165. }
  166. }
  167. .line-width {
  168. display: flex;
  169. align-items: center;
  170. flex-direction: column;
  171. margin-left: 8px;
  172. position: relative;
  173. }
  174. span {
  175. font-size: 12px;
  176. color: #1f2429;
  177. margin-top: 4px;
  178. }
  179. }
  180. }
  181. }
  182. }
  183. </style>