message-tip.vue 678 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div class="message-tip">{{message.text}}</div>
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
  6. const MessageTip = defineComponent({
  7. props: {
  8. data: {
  9. type: Object,
  10. default: () => {
  11. return {};
  12. }
  13. },
  14. },
  15. setup(props:any, ctx:any) {
  16. const data = reactive({
  17. message: {},
  18. });
  19. watchEffect(()=>{
  20. data.message = props.data;
  21. });
  22. return {
  23. ...toRefs(data),
  24. };
  25. }
  26. });
  27. export default MessageTip
  28. </script>
  29. <style lang="scss" scoped>
  30. .message-tip {
  31. margin: 8px auto 0;
  32. color: #999999;
  33. font-size: 13px;
  34. text-align: center;
  35. }
  36. </style>