How to use the ref function from vue

v3.js

GitHub: gera2ld/qrcanvas-vue

3
4
5
6
7
8
9
10
11
12
module.exports = defineComponent({
  components: {
    QRCanvas,
  },
  setup() {
    const text = ref('hello, world');
    const options = computed(() => ({
      resize: false,
      data: text.value,
    }));

9

70

5

shadow.js

GitHub: JustinWinthers/shadow

61
62
63
64
65
66
67
68
69
70
    slotId: {
        type: String
    }
},
setup(props, { slots }) {
    const abstract = vue.ref(false);
    const static_ = vue.ref(false);
    const el = vue.ref();
    vue.onBeforeMount(() => {
        abstract.value = props.abstract;

7

0

0

+ 11 other calls in file

el-tabs.js

GitHub: LeFE-1/LeFE

138
139
140
141
142
143
144
145
146
147
  throw new Error(`ElTabNav must use with ElTabs`);
}
const scrollable = vue.ref(false);
const navOffset = vue.ref(0);
const isFocus = vue.ref(false);
const focusable = vue.ref(true);
const navScroll$ = vue.ref(null);
const nav$ = vue.ref(null);
const el$ = vue.ref(null);
const sizeName = vue.computed(() => {

3

8

3

+ 31 other calls in file

index.js

GitHub: hacfins/vue3-multi-page

24
25
26
27
28
29
30
31
32
33
        validator: (val) => ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),
    },
},
setup(props) {
    const index = vue.ref(-1);
    const lineStyle = vue.ref({});
    const internalStatus = vue.ref('');
    const parent = vue.inject('ElSteps');
    const currentInstance = vue.getCurrentInstance();
    vue.onMounted(() => {

1

2

1

+ 5 other calls in file

index.js

GitHub: hacfins/vue3-multi-page

87
88
89
90
91
92
93
94
95
96
    return {
        top: `${props.offset}px`,
        zIndex: props.zIndex,
    };
});
const visible = vue.ref(false);
let timer = null;
function startTimer() {
    if (props.duration > 0) {
        timer = setTimeout(() => {

1

2

1

index.js

GitHub: hacfins/vue3-multi-page

10
11
12
13
14
15
16
17
18
19

var isServer__default = /*#__PURE__*/_interopDefaultLegacy(isServer);
var throwError__default = /*#__PURE__*/_interopDefaultLegacy(throwError);

function useVirtualScroll(props) {
    const viewportRef = vue.ref();
    const offset = vue.ref(0);
    const cache = vue.ref(0);
    const isVertical = vue.ref(true);
    const sizeKey = vue.ref('');

1

2

1

+ 17 other calls in file

index.js

GitHub: hacfins/vue3-multi-page

38
39
40
41
42
43
44
45
46
47
props: {
    isAutoWidth: Boolean,
    updateAll: Boolean,
},
setup(props, { slots }) {
    const el = vue.ref(null);
    const elForm = vue.inject(elFormKey);
    const elFormItem = vue.inject(elFormItemKey);
    const computedWidth = vue.ref(0);
    vue.watch(computedWidth, (val, oldVal) => {

1

2

1

+ 11 other calls in file

index.js

GitHub: hacfins/vue3-multi-page

37
38
39
40
41
42
43
44
45
46
}

function createLoadingComponent({ options, globalLoadingOption, }) {
    let vm = null;
    let afterLeaveTimer = null;
    const afterLeaveFlag = vue.ref(false);
    const data = vue.reactive(Object.assign(Object.assign({}, options), { originalPosition: '', originalOverflow: '', visible: false }));
    function setText(text) {
        data.text = text;
    }

1

2

1

index.js

GitHub: hacfins/vue3-multi-page

42
43
44
45
46
47
48
49
50
51
    });
}

const useTooltip = (props, formatTooltip, showTooltip) => {
    const tooltip = vue.ref(null);
    const tooltipVisible = vue.ref(false);
    const enableFormat = vue.computed(() => {
        return formatTooltip.value instanceof Function;
    });
    const formatValue = vue.computed(() => {

1

2

1

+ 3 other calls in file

index.js

GitHub: hacfins/vue3-multi-page

31
32
33
34
35
36
37
38
39
40
    },
},
emits: ['click'],
setup(props, ctx) {
    const el = vue.ref(null);
    const container = vue.ref(null);
    const visible = vue.ref(false);
    const styleBottom = vue.computed(() => `${props.bottom}px`);
    const styleRight = vue.computed(() => `${props.right}px`);
    const scrollToTop = () => {

1

2

1

+ 5 other calls in file

index.js

GitHub: infinitasx/easi-packages-antd

80
81
82
83
84
85
86
87
88
89
} = _vue.toRefs(props);

const route = vueRouter.useRoute();
const router = vueRouter.useRouter();

const openKeys = _vue.ref([]);

const selectedKeys = _vue.ref([]);

const _changeSelect = () => {

1

1

4

+ 7 other calls in file

refHistory.test.js

GitHub: js-tasks-ru/vue-20230120_dan-sidoro2013

1
2
3
4
5
6
7
8
9
10
11
const { refHistory } = require(global.getSolutionPath('utils/refHistory'));


describe('reactivity/refHistory', () => {
  describe('refHistory', () => {
    it('refHistory должен возвращать объект с history', async () => {
      const foo = ref(undefined);
      const fooHistory = refHistory(foo);
      expect(fooHistory).toBeInstanceOf(Object);
      expect(fooHistory.history).toBeDefined();
    });

1

0

2

+ 129 other calls in file

vue3-code-block.js

GitHub: webdevnerdstuff/vue3-code-block

243
244
245
246
247
248
249
250
251
252
// -------------------------------------------------- Emits & Slots & Injects //
const slots = vue.useSlots();
const codeBlockGlobalOptions = vue.inject('codeBlockGlobalOptions');
// -------------------------------------------------- Props //
// -------------------------------------------------- Data //
const copyTextValue = vue.ref('');
const convertedCode = vue.ref(null);
const copying = vue.ref(false);
const copyStatus = vue.ref('copy');
const isMobile = vue.ref(false);

0

1

1

+ 6 other calls in file

vue3-code-block.js

GitHub: webdevnerdstuff/vue3-code-block

1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
const copyStatus = vue.ref('copy');
const copyTextValue = vue.ref('');
const copying = vue.ref(false);
const isLoading = vue.ref(false);
const isMobile = vue.ref(false);
const prismCdn = vue.ref(`https://cdn.jsdelivr.net/gh/PrismJS/prism@${prismVersion}/themes`);
const runTextValue = vue.ref('');
const useTheme = vue.ref('');
// -------------------------------------------------- Computed //
const codeBlockClasses = vue.computed(() => {

0

1

1

+ 53 other calls in file

library.js

GitHub: agc-desarrollo/cliente_formulario_dinamico

810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825


const props = __props;






const field_options = vue.ref();


const { input_event, click_event, model, config } = useInputCommon( emit, VFJSelectInputConf, props,{ field_options:field_options });

0

0

7

+ 114 other calls in file

Editor.js

GitHub: csii-cli/vue-template

43
44
45
46
47
48
49
50
51
52
props: EditorPropTypes_1.editorProps,
setup: function (props, ctx) {
  var _a = vue_1.toRefs(props),
    disabled = _a.disabled,
    modelValue = _a.modelValue
  var element = vue_1.ref(null)
  var vueEditor = null
  var elementId = props.id || Utils_1.uuid('tiny-vue')
  var inlineEditor = (props.init && props.init.inline) || props.inline
  var modelBind = !!ctx.attrs['onUpdate:modelValue']

0

0

1

index.js

GitHub: BlackToolBoxLaboratory/vue-list

306
307
308
309
310
311
312
313
314
315
    }
},
emits: ["update:activeID", "clickEntry", "toggleCollapsed"],
setup: function (props, _a) {
    var emit = _a.emit, slots = _a.slots;
    var activeEntryID = vue.ref(props.activeID || props.defaultActiveID || "");
    var slotList = vue.computed(function () {
        return Object.keys(slots);
    });
    var clickEntry = function (entry) {

0

0

1

library.js

GitHub: agc-desarrollo/cliente_formulario_dinamico

132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
const props = __props;








const form_data = vue.ref( props.modelValue );
const form_def  = vue.ref( null );


vue.ref( null );

0

0

7

+ 22 other calls in file

index.js

GitHub: BlackToolBoxLaboratory/vue-list

47
48
49
50
51
52
53
54
55
56
    }
},
emits: ["update:activeID", "clickEntry", "toggleCollapsed"],
setup: function (props, _a) {
    var emit = _a.emit, slots = _a.slots;
    var activeEntryID = vue.ref(props.activeID || "");
    var slotList = vue.computed(function () {
        return Object.keys(slots);
    });
    var clickEntry = function (entry) {

0

0

1

vue-router.cjs.js

GitHub: chen82508/DotNetCore-WebApp

2244
2245
2246
2247
2248
2249
2250
2251
2252
2253
const depth = vue.inject(viewDepthKey, 0);
const matchedRouteRef = vue.computed(() => routeToDisplay.value.matched[depth]);
vue.provide(viewDepthKey, depth + 1);
vue.provide(matchedRouteKey, matchedRouteRef);
vue.provide(routerViewLocationKey, routeToDisplay);
const viewRef = vue.ref();
// watch at the same time the component instance, the route record we are
// rendering, and the name
vue.watch(() => [viewRef.value, matchedRouteRef.value, props.name], ([instance, to, name], [oldInstance, from, oldName]) => {
    // copy reused instances

0

0

1

+ 11 other calls in file