message-reply.ftl 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!-- 消息回复 && 关注回复 -->
  2. <!DOCTYPE html>
  3. <html lang="">
  4. <head>
  5. <title></title>
  6. <!-- <#include "/include/head-file.ftl"/> -->
  7. <!-- <link rel="stylesheet" href="${base}/static/mweixin/css/message-reply.css"> -->
  8. <!--#include virtual="../include/head-file.ftl" -->
  9. <link rel="stylesheet" href="../../../static/mweixin/css/message-reply.css">
  10. </head>
  11. <body>
  12. <div id="message-reply" class="ms-message-reply ms-container">
  13. <div>回复内容</div>
  14. <el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
  15. <el-tab-pane label="文字" name="text">
  16. <el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm">
  17. <el-form-item class="ms-message-reply-content">
  18. <el-input
  19. type="textarea"
  20. v-model="messageReplyForm.reply"
  21. :autosize="{ minRows: 4, maxRows: 4}"
  22. resize='none'
  23. >
  24. </el-input>
  25. <i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
  26. <div class="footer">
  27. <i class="el-icon-star-off"></i>
  28. <a>插入超链接</a>
  29. </div>
  30. </el-form-item>
  31. </el-form>
  32. </el-form>
  33. </el-tab-pane>
  34. <el-tab-pane label="图片" name="picture">
  35. </el-tab-pane>
  36. <el-tab-pane label="图文" name="article">
  37. </el-tab-pane>
  38. </el-tabs>
  39. </div>
  40. </body>
  41. </html>
  42. <script>
  43. var messageReplyVue = new Vue({
  44. el: "#message-reply",
  45. data: {
  46. messageReplyForm: {
  47. reply: '',
  48. },
  49. messageReplyFormRules: {
  50. name: [{
  51. required: true,
  52. message: '请输入菜单名称',
  53. trigger: ['blur', 'change']
  54. },
  55. {
  56. min: 1,
  57. max: 5,
  58. message: '长度在 1 到 5 个字符',
  59. trigger: ['blur', 'change']
  60. }
  61. ],
  62. },
  63. activeName: 'text',
  64. },
  65. methods: {
  66. }
  67. })
  68. </script>